Search code examples
wordpresswidthshuttle

Shuttle theme full width


I want the part of "RENT A CAR DONI" on https://liridonigraphics.com/, the red background to be full width but the theme has any option that is not letting it done. Can you help me how to solve it ?

Tried this but didn't solve:

/* Target the specific container by its class */
.elementor-container.elementor-element-d61808d {
    width: 100%; /* Make the container full width */
    max-width: 100%; /* Ensure the container does not exceed the viewport width */
    padding-left: 0; /* Remove left padding (if needed) */
    padding-right: 0; /* Remove right padding (if needed) */
    margin-left: auto; /* Center align the container (optional) */
    margin-right: auto; /* Center align the container (optional) */
}

Solution

  • The div with id content as shown in the screenshot below has a left and right padding which prevents the some sections on your page from being full width. Try looking to the page settings of the elementor to find this.

    The workaround(which is not so good) can be the css code below:

    div#content {
        padding: 0;
    }
    

    And if you need to apply this css on this page only then use this:

    .page-id-2 div#content {
        padding: 0;
    }
    

    Just add any of the css from above in your custom css and you should be set.

    enter image description here