Page content is too wide

  • Resolved helpneeded00

    (@helpneeded00)


    5 years, 8 months ago

    Hi
    I am trying to redo our local website in line with the national branding. Since I updated the site with the new theme, the width of the content text overflows on the right hand side of the screen and it now adds a horizontal scroll bar on the bottom. This does not happen under the previous theme but it is now on every webpage (even new ones added since changing the theme). We have tried removing the formatting from the text, redownloading and reinstalling the theme – all to no avail. I contacted the branding lead to try to understand what the problem was but he has not got back in touch. Neither of the their example websites seem to be suffering from the same problem.

    Any help would be very much appreciated!
    Kind regards,
    Michela

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’ve noticed that lots of things have been given a width of “100%” but then have also been given padding. I’m assuming you know what I mean by this. Padding adds onto width, for example take this style

    
#content {
    ...
    padding-left: 20%;
    padding-right: 20%;
    width: 100%;
    ...
}

    The width will equal to “100%” + “40%” (which is quite large).

    To get the width to understand and encompass the padding values, use a “box-sizing” model of “border-box”: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    For example:

    
#content {
    ...
    box-sizing: border-box;
    padding-left: 20%;
    padding-right: 20%;
    width: 100%;
    ...
}
    Thread Starter helpneeded00

    (@helpneeded00)

    Thanks so much. My coding knowledge is not great but my husband should be able to look at that. I will get back to you as soon as I have managed to run it past him.

    Thread Starter helpneeded00

    (@helpneeded00)

    Thank you – that has fixed it!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Glad to hear it ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Page content is too wide’ is closed to new replies.