hey I am writing a little website and I am using w3css that I find very simple and nice.
I have the body with max-width:100%;; a sidebar class="w3-hide-small" with width: 15%; and a main with margin-left:15%; width:85%;
But when the sidebar is hidden on small screen, the main is still 85% and it remains a 15% white on the right of the browser.
I think that I shall do it with javascript cause w3css and I thought this code, but for sure it is full of error.
var Sidebar = document.getElementById('theSidebar');
if (Sidebar.visibility === hidden){
document.getElementById('theMain').style.width = '100%'
document.getElementById('theMain').style.margin-left = '0px'}
But...... it just does not work :D
Suggestions?
Hoping that I described the issue well.
Bye!!!
Andrea
The problem was that I had a blank space when I resized the screen to phone width. That's because I set the style of the main division
<div class=w3-main style="margin-left: 15%; width:85%" >that is 100 - 15 = 85. I was thinking to use a javascript function.But, as suggested by David Thomas, I avoided javascript to make the thing in a easier way using css grid. I resolved the question writing:
And even I think that it may be not the perfect solution by me, the thing works and now when I visualize in phone screen, hiding the sidebar, the right white margin disappears and remains the color red.
I thank everyone who answered me.
Andrea