CSS help, please

  • For the “Coats and Sweatshirt” section with flower background, I want to 1) lose the big bottom margin and padding and 2) make the background image to be full width with the browser.

    I added the following CSS but it’s not working. Can someone please help me?

    div#post-3168 {

  padding-bottom: 0;

  margin-bottom: 0;

}

section#sph-3e0dcf0f50d00d2988e5a4f64cf0de25 {

  margin-bottom: 0;

}

section#sph-3e0dcf0f50d00d2988e5a4f64cf0de25n {

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  width: auto;

  background-size: cover !important;

}

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

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

  • Based on the CSS you provided, I have some insights that might help.

    1. Incorrect or Extra Identifier: The third CSS rule is for an element with the id sph-3e0dcf0f50d00d2988e5a4f64cf0de25n. Please ensure that this is the correct ID for the element. A typo or an extra character could be why your CSS rule isn’t applying. For instance, you might have wanted to target sph-3e0dcf0f50d00d2988e5a4f64cf0de25 (which appears in your second rule) instead of sph-3e0dcf0f50d00d2988e5a4f64cf0de25n.
    2. !important declaration: Sometimes, your CSS rules may not be applying because of other CSS rules that have higher specificity or are loaded later. In such cases, adding !important after your declarations might help. For example:

    div#post-3168 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    }

    3. CSS for Full-Width Background Image: To make your background image full-width, ensure the container of the image is full-width as well. Here’s a standard approach:

    .container-class-name {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    }

    Make sure you replace .container-class-name with the actual class name or ID of your container.

    1. Browser Cache: Clear your browser cache after making changes, as your browser may still be loading the old version of your CSS.

    Lastly, keep in mind that the specific theme or builder you’re using may have unique quirks or ways of handling CSS, so it’s always a good idea to refer to the specific documentation for the theme or page builder you’re using.

    Hi @yumiko

    Kindly try this code:-

    body div#content section#sph-3e0dcf0f50d00d2988e5a4f64cf0de25 {
 width: 100vw;
 position: relative;
 left: 50%;
 right: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
}
    Thread Starter yumiko

    (@yumiko)

    alldridge and niyaswp,

    Your CSS worked!!
    Thank you SO MUCH, both of you. Much, much appreciated ????

    Hi @yumiko

    Glad it worked!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS help, please’ is closed to new replies.