0

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

Andrea
  • 19
  • 5
  • This sounds like it should be relatively straightforward, can you share your relevant "*[mcve]*" code? See: "*[I've been asked to create a 'runnable' snippet...](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do).*" The obvious suggestion, though, would be to use CSS Grid, or Flex, layout rather than JavaScript. – David Thomas Feb 04 '22 at 14:27
  • well I could use maybe w3 class "w3-rest" so when sidebar disappear the rest would be 100%... maybe? I will try right now thanks a lot man!! :D – Andrea Feb 04 '22 at 14:31
  • Don't tell us about it. Fix your question. It lacks enough information to answer. Look again at [ask]. – isherwood Feb 04 '22 at 14:42
  • @Andrea, please add the required information to your question so that others may be able to offer informed answers, possibly better than your own. Also, if you've solved your problem post an answer: show us, and any future visitors to this question, how you reached a solution. – David Thomas Feb 04 '22 at 14:44
  • Change 1st line to Sidebar.style.visibility === "hidden" and 4th line to style.marginLeft = '0px' – keyhan Feb 04 '22 at 15:14
  • Thanks @keyhan! – Andrea Feb 04 '22 at 21:15

1 Answers1

0

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

Andrea
  • 19
  • 5