Changing Margins and Padding

  • nobuhlesibusiso

    (@nobuhlesibusiso)


    4 years, 7 months ago

    Hello.

    I found an article on how to change the margins and padding of pages somewhere else where you provided this css code:

    @media (min-width: 1200px) {
.container {
    max-width: 1500px;
    width: 100%;
}
}

    I applied the code which worked for the site, except the top bar and footer were also affected. How can I make this modification without affecting the width of the top bar or footer which i would like to extend to both ends of the screen?

    How’s how my advance settings reads after adding the above code:

    .headerclass .container {
    width: 100%;
    padding: 0;
}
.virtue_banner img {
    width: 100%;
    max-height: 400px;
    padding-bottom: 40px;
}
.topclass .kad-topbar-right {
    width: 100%;
}
.topclass .kad-topbar-right p {
    margin: 1em 0;
}
.topclass .kad-topbar-right a {
    display: block;
    text-align: center;
}
.topclass .kad-topbar-left {
    display: none;
}
@media (min-width: 1200px) {
.container {
    max-width: 1500px;
    width: 100%;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • karlalevelup

    (@karlalevelup)

    4 years, 7 months ago

    Hello,

    Thank you for reaching out to us.

    If you only want to adjust the width of the content container, you can change the custom CSS code to this:

    @media (min-width: 1200px) {
    #content.container {
        max-width: 1500px;
        width: 100%;
    }
}

    Hope this helps and let us know if we can assist you further.

    Regards,
    Karla

    Thread Starter nobuhlesibusiso

    (@nobuhlesibusiso)

    4 years, 7 months ago

    Thank you. That worked for the header, but unfortunately, it didn’t work for the footer. The site is currently live so you’ll be able to see what I’m talking about by clicking here. Is there no way to cause the footer to go back from end-to-end as well?

    karlalevelup

    (@karlalevelup)

    4 years, 7 months ago

    Hello @nobuhlesibusiso,

    The footer itself is full-width, only the content inside it is being contained. Upon inspecting your footer, I saw that you added a background image as its background. I would recommend adding a custom CSS property to show it as full-width as well.

    Here’s a screen recording for your reference – https://share.getcloudapp.com/nOu5Ppyj. The custom CSS code should be like this:

    .footerclass {
    background: transparent url(https://globalgrowthpublishing.org/wp-content/uploads/2021/07/GGP-Footer.png) no-repeat center center;
    background-size: 100%;
}

    Regards,
    Karla

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Changing Margins and Padding’ is closed to new replies.