• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Revolution Pro full width image on homepage

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Revolution Pro full width image on homepage

This topic is: not resolved

Tagged: 100%, full width, Gutenberg, Revolution Pro, Width

  • This topic has 7 replies, 5 voices, and was last updated 2 years, 6 months ago by Marcy.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 18, 2019 at 9:43 am #491683
    eppiemcm
    Participant

    Hi,
    I have tried to edit the css to achieve this (making the main image 100% wide) as I have done in many SP themes and is usually straightforward, but it seems to conflict with the Gutenberg CSS on front-end.css. And I don't want to go near it:

    
    .page.full-width-content .entry-content .alignfull, .single.full-width-content .entry-content .alignfull {
        margin-left: calc(-960px / 2 + 100% / 2);
        margin-right: calc(-960px / 2 + 100% / 2);
        max-width: 960px;
    }
    

    All help appreciated, I am having a 'slow' day!

    http://helen-ssgj.temp-dns.com/
    June 25, 2019 at 5:15 pm #491928
    Marcy
    Participant

    Revolution Pro has two media queries for .alignfull that you would need to change.

    @media only screen and (min-width: 1000px) {
    
    	.page.full-width-content .entry-content .alignfull,
    	.single.full-width-content .entry-content .alignfull {
    		margin-left: calc(-960px / 2 + 100% / 2);
    		margin-right: calc(-960px / 2 + 100% / 2);
    		max-width: 960px;
    	}
    }

    and

    @media only screen and (min-width: 1240px) {
    
    	.page.full-width-content .entry-content .alignfull,
    	.single.full-width-content .entry-content .alignfull {
    		margin-left: calc(-1200px / 2 + 100% / 2);
    		margin-right: calc(-1200px / 2 + 100% / 2);
    		max-width: 1200px;
    	}
    
    	.page.full-width-content.custom-page .entry-content .alignfull {
    		margin-left: -200px;
    		margin-right: -200px;
    		max-width: 1200px;
    	}
    }

    You could also try to do it this way instead
    https://www.billerickson.net/full-and-wide-alignment-in-gutenberg/


    Marcy | Amethyst Website Design | Twitter

    August 1, 2019 at 8:24 am #492714
    eppiemcm
    Participant

    Marcy, thank you so much, you pointed me in exactly the right direction and thankfully all working now. Apologies for delayed response, these emails must get caught in the spam - I thought it hadn't been answered.

    August 2, 2019 at 2:50 am #492736
    Geek Dom
    Member

    Hi eppiemcm, can you please share what you did to get the full width image on the homepage. I'm trying to do the same with Revolution Pro. Thanks.

    August 6, 2019 at 10:27 pm #492868
    nurserowan
    Member

    Hi Marcy. I've tried your suggestion but my full width images are still not extending to the edge of the screen. Can you please take a look and see what I'm doing wrong?

    Thanks

    August 8, 2019 at 6:45 pm #492897
    Marcy
    Participant

    You have to find and change the sections listed above in
    /revolution-pro/lib/gutenberg/front-end.css.

    @media only screen and (min-width: 1000px) {
    
    	.page.full-width-content .entry-content .alignfull,
    	.single.full-width-content .entry-content .alignfull {
    		/*margin-left: calc(-960px / 2 + 100% / 2);
    		margin-right: calc(-960px / 2 + 100% / 2);
    		max-width: 960px;*/
    		margin-left: calc(-100vw / 2 + 100% / 2);
    		margin-right: calc(-100vw / 2 + 100% / 2);
    		max-width: 100vw;
    	}
    }
    
    @media only screen and (min-width: 1240px) {
    
    	.page.full-width-content .entry-content .alignfull,
    	.single.full-width-content .entry-content .alignfull {
    		/*margin-left: calc(-1200px / 2 + 100% / 2);
    		margin-right: calc(-1200px / 2 + 100% / 2);
    		max-width: 1200px;*/
    		margin-left: calc(-100vw / 2 + 100% / 2);
    		margin-right: calc(-100vw / 2 + 100% / 2);
    		max-width: 100vw;
    	}
    
    	.page.full-width-content.custom-page .entry-content .alignfull {
    		/*margin-left: -200px;
    		margin-right: -200px;
    		max-width: 1200px;*/
    		margin-left: calc(-100vw / 2 + 100% / 2);
    		margin-right: calc(-100vw / 2 + 100% / 2);
    		max-width: 100vw;
    	}
    }
    
    

    Marcy | Amethyst Website Design | Twitter

    August 17, 2020 at 10:38 am #500630
    Rob Mc
    Participant

    I appreciate the help here, as this issue has been driving me crazy.

    However, I have to ask, why did the theme designers consider this theme "gutenberg ready" when the full width doesn't work? Not for hero image blocks, atomic block containers, or anything else?

    I feel that the theme should comply with all aspects of the Gutenberg block formatting - allow the owners/designers to choose how to implement it. That I have to track down basic functionality in the forums, then update my theme, just to get it to work as advertised is really disappointing, not to mention frustrating.

    August 17, 2020 at 5:38 pm #500634
    Marcy
    Participant

    That's really a question to ask StudioPress. We don't know the answer to that question.


    Marcy | Amethyst Website Design | Twitter

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble