On Mobile #content is only 96% wide

I forgot to add above:

Your help would be appreciated, it’s a great theme.

Correction: I CAN effect it using ‘additional CSS’ – I had a typo ;(

But sill want your comment as to why I need to.

Regards …

Hi,

There’s a main container with a white background, that contains all elements (header, content, sidebar, footer). Width of the individual elements is 96% for a reason. Content section has a grey backgound and rounded corners on top. So when making width of this area 100%, it cuts of the white background of main container on left and right side. Best seen in “regular” PC screen, when increasing screen size to min. 300%.

Guido

Hi again,

There’s another thing I notice. In normal screen there’s much space between content and sidebar. This is caused by CSS that is added by a slider plugin (Fade Slider?):

::after,::before{box-sizing:border-box;}

Are you using this slider plugin at your website? If not, please remove it.

Besides this, you’re not using most recent version of my GridBulletin theme.

Guido

Thanks Guido,
I dissabled the ‘Fade Slider’ plugin * and that has cured the problem.
It’s now resolved. Thank you very much for your fast response.

If you have time, can you explain how you found what was causing the problem.
Before contacting you, I had looked at the page code and all the .css files looking for something that effected the #content element, and didn’t find anything. What should I have looked for?

PS * we will now look for a fade-slider plugin that DOESN’T cause problems ??

Hi,

Great!

That plugin was using CSS without prefix, so this was targeting all elements of a site, not only slider elements.

The container width in mobile is 96% + 2% padding on left and right side = 100%.
But when using box-sizing:border-box; the 96% width is including the padding.

To be honest, nowadays box-sizing:border-box; is often used in development, because you don’t have to take padding (and border) into account. But my themes are developed quite some time ago.

Guido