how to only have hero image full width?

  • Resolved andrew55

    (@andrew55)


    6 months, 1 week ago

    If I set page to be full width (Astra), all rows, including hero will be full width. But I only need hero image full width, not all the other rows that have content. Is there maybe a css class that I can put in rows that I don’t want to be full width?

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    Hi Andrew

    I hope your weekend is off to a good start. Page Builder can break out of the theme’s container. You can do that by editing the Hero’s row, clicking the wrench icon far right, opening Layout > Row Layout > Full Width Stretched. Please let us know how you get on.

    Thread Starter andrew55

    (@andrew55)

    Thankyou, but as you can see on link, after setting row to ‘Full Width Stretched,’ the hero image is still staying within content container (it’s not stretching to full width of page). Any ideas on how to get image to stretch to full width? Thank you for any suggestions.

    Plugin Support Andrew Misplon

    (@misplon)

    Thanks for the update. Please can you kindly raise a support thread with the theme authors. Astra has defined a CSS rule that prevents the Page Builder full-width function from working. The rule can be found in /wp-content/themes/astra/assets/css/minified/compatibility/site-origin.min.css.

    Thread Starter andrew55

    (@andrew55)

    OK, how should I approach the Astra team? I’m concerned they know little about your plugin?

    Plugin Support Andrew Misplon

    (@misplon)

    The theme authors are aware of SiteOrigin Page Builder. The CSS rule mentioned in my previous reply is contained within a stylesheet in the theme specifically added to target Page Builder.

    Plugin Support Andrew Misplon

    (@misplon)

    Astra is preventing SiteOrigin Page Builder Full Width Stretched rows from stretching. Astra is adding the following rule via astra/assets/css/minified/compatibility/site-origin.min.css:

    .siteorigin-panels .siteorigin-panels-stretch {
    max-width: 100%;
    margin-left: auto!important;
    margin-right: auto!important
    }

    Perhaps you could send a function to dequeue the siteo-origin.min.css file?

    Hopefully, the authors are able to assist. If the authors send you a function to dequeue the above mentioned file, you can add the function via Code Snippets or a child theme functions.php file.

    Cheers

    Plugin Support Andrew Misplon

    (@misplon)

    Hi Andrew, you can find a function linked below to remove the Astra SiteOrigin compatibility CSS file:

    https://siteorigin.com/page-builder/advanced-customizations/#heading-remove-astra-siteorigin-page-builder-compatibility-file

    The function can be added to the Code Snippets plugin (linked above) once installed in WordPress.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘how to only have hero image full width?’ is closed to new replies.