[Resolved] Full width image in section using CSS

Home Forums Support Full width image in section using CSS

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #892407
    Joseph

    Challenged on adding a full-width image at the bottom of a section. I used CSS to do this but cannot seem to find the solution to make the background image fullscreen. Tried using grid-container with no luck. Any help is welcomed.
    The background image I speak of is the Barbara Bush quote under the social media columns

    Thanks in advance.

    #892648
    David
    Staff
    Customer Support

    Hi there,

    so you would need to make the Sections inner container full width.

    Then wrap your heading and three columns like so to make them contained:

    <div class="grid-container">
    <!-- heading and three columns HTML in here -->
    </div>

    This will allow the socialbottom to be full width.

    #892698
    Joseph

    Thank you for your quick response David.
    I had tried full screen on the inner container with the grid container as mentioned and as you suggested. I still get this result. The gap on the left and right margin of the background. I tried setting both right and left margins at O on the socialbottom class in CSS to no avail.

    see attached (red down arrows)
    https://provinciaclient.com/m4a/work/m4a_bg.png

    screenshot

    #892902
    David
    Staff
    Customer Support

    Give that section a Custom Class on the settings tab of no-padding and then add this CSS:

    .no-padding .generate-sections-inside-container {
        padding-left: 0;
        padding-right: 0;
    } 
    #893034
    Joseph

    Thank you, David!! That did the trick.

    Much appreciated.

    #893035
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.