On Mobile #content is only 96% wide

  • Resolved gretche

    (@gretche)


    1 year, 10 months ago

    On mobile devices – the main content area “#content’ is only 96% wide, the other areas above and beneath it are 100% wide – and it’s left aligned so looks oddly positioned.

    Your css is:

    @media screen and (max-width: 767px)
    #content, #content-right, #content-full {
    width: 96%;
    clear: both;
    float: left;
    padding: 20px 2%;
    margin: 0 0 20px;
    }

    Why isn’t it 100% wide? Can it be changed?

    Customising the theme using ‘Additional CSS’ doesn’t seem to effect the width.
    i.e. #content { width:100% !important;} doesn’t work.
    Why??

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter gretche

    (@gretche)

    1 year, 10 months ago

    I forgot to add above:

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

    Thread Starter gretche

    (@gretche)

    1 year, 10 months ago

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

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

    Regards …

    Theme Author Guido

    (@guido07111975)

    1 year, 10 months ago

    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

    Theme Author Guido

    (@guido07111975)

    1 year, 10 months ago

    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

    Thread Starter gretche

    (@gretche)

    1 year, 10 months ago

    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 😉

    Theme Author Guido

    (@guido07111975)

    1 year, 10 months ago

    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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘On Mobile #content is only 96% wide’ is closed to new replies.