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:
<html>
<head>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
</head>
<body class="w3-content" style="max-width:100% !important;">
<div class="w3-sidebar w3-hide-small w3-green" style="width:15%; z-index:3;">
</div>
<div class="w3-main w3-rest w3-red" style="margin-left:15%;">
SOMETHING TO WRITE HERE...........
</div>
</body>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