1

I can't explain this behavior, and I have been investigating this problem for 3 days now. The website in question is here. Excuse the bloated state of it and other shortcomings it was not done by a professional web designer - and it is in a developmental/experimental state.

Within a particular screen size range, my website - instead of fitting to the screen size as it has been coded to do within that screen range, goes into x scrolling and exhibits dead space to the right of the website.

Check out this simulation and scroll right to see the dead space. Note that there should not be any scrolling at the 600 - 1024 px screen width range - I want content to fill up the available space and no more, so I have set all higher-level divs to max-width 100%.

Screenshot showing what I mean:

enter image description here

There are 3 break-points based on 3 sets of media queries and I assume the active one in which the behavior is observed is when @media only screen and (min-width: 1024px) rules are active:

@media only screen and (min-width: 1024px){

div.sidebar {
font-size: 10pt !important;
width: 30% !important;
display: table-cell !important;
vertical-align: top;
clear: right !important;
float: left !important;
}


div#page{
margin: 0 auto !important;
padding: 0 !important;
max-width: 80vw !important;
}

main#content, .site-content{
width: 70% !important;
float:left;
}

div#super-content{
width: 100% !important;
}

div#primary{max-width: 100% !important}

} /* end media query */




/* up to 1024*/

@media only screen and (max-width: 1024px){

div.sidebar {
font-size: 10pt !important;
width: 30%;
display: table-cell !important;
vertical-align: top;
clear: right !important;
float: left;
}


div#page{
margin: 0 auto !important;
padding: 0 !important;
max-width: 100% !important;
}

div#primary{max-width: 100% !important}

main#content, .site-content{
float: left;
width: 70% !important;
}

div#super-content{
max-width: 100% !important;
}

} /* end media query */




/* up to 600 */
@media only screen and (max-width: 600px){

main#content{
width: 100% !important;
}

.sidebar{
float: left;
vertical-align: initial !important;
display: block !important;
width: 100% !important;
}

#page{
max-width: 100% !important;
}


main#content{padding-right: 0;}

} /* end media query */

I really don't know where to begin as far a posting HTML, but since I've posted up the website link it should be trivial to go into browser developer mode to see the overall HTML structure and CSS rules applied to each and every container.

Zub
  • 808
  • 3
  • 12
  • 23
ptrcao
  • 421
  • 1
  • 5
  • 19

1 Answers1

2

This is normally caused by a rogue element which is sticking out of it's container.

You can often figure out where that element is by applying overflow:hidden to the containers to figure out which it lives in, when the space disappears you will know it's within that container.

I found your issue on the 2nd attempted by applying this to the header element on your page.

After a bit more investigation, it's actually caused by a sub-nav.

As shown here: screenshot of OPs webpage

So, if you want to fix this, you could position the dropdown menu to be aligned to right instead of the left, (so the menus stick the other way), though make sure to only do this on the far right menu items, otherwise you'll have the exact same problems on the other side of your nav.

It appears you're using a third-party plugin to do create this navigation, so, if you don't want to get into the nitty-gritty bits to sort this out yourself, I would recommend using a bootstrap navigation instead.

Hope that helps, best of luck.

joe
  • 405
  • 4
  • 11
  • Wow, that cheeky little submenu. Well spotted, good Sir. I've reconfigured to menu to flyout left-side and the dead space is now gone. My thanks. Now onto the next problem - why my page won't fit 100% to the screen width but ends up overflowing and inducing horizontal scrolling... always a culprit to be found... – ptrcao Dec 14 '17 at 03:13
  • The question has been posed [here](https://stackoverflow.com/questions/47805715/unable-to-force-website-to-fit-to-screen-width) separately, so the accepted answer is still up for grabs if you want to give it a shot. ;-) – ptrcao Dec 14 '17 at 04:17