[Resolved] Make div full screen

Home Forums Support [Resolved] Make div full screen

Home Forums Support Make div full screen

Viewing 15 posts - 1 through 15 (of 48 total)
  • Author
    Posts
  • #592426
    Ivan Cazorla

    Good afternoon!

    Is there any possibility to make a div that is inside the site-container, make it full screen so that it can have a background color full screen but the content is still inside the container?

    thanks,
    Ivan

    #592433
    David
    Staff
    Customer Support

    Hi there,

    What’s the difference between this and setting the Body background color?
    Having a little trouble picturing this so any image or example would be of help.

    #592435
    Ivan Cazorla

    Hi again,

    Well I’d like to make different colored sections as this example on the image, so I cannot use always the same body background color.

    https://snag.gy/MNzfP5.jpg

    Website example link here: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html

    thanks,
    Ivan

    #592437
    Ivan Cazorla

    I wish I could use GP hooks but as for woocommerce product tabs I think that’s not possible, isn’t it?

    thanks,
    Ivan

    #592449
    David
    Staff
    Customer Support

    Its not possible with GP Hooks without rebuilding most of the page. The Woocommece hooks are also within the post content so will be limited by the container width.
    It would require us to make the entire page full width and then add back the containment where required using margins. Is it just the tabs section you would need this for?

    #592451
    Ivan Cazorla

    Alright, I understand. Yes I only need this for the tabs sections. Yeah I thought doing the entire page full width and then add back the containers.

    thanks,
    ivan

    #592456
    David
    Staff
    Customer Support

    FYI here are the Woo Hooks.

    https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

    Unfortuntely there is not a hook below the tabs section until you get to the end of the product. But you could use the before single product summary and after single product summary to wrap the gallery and description to make that a bit more manageable when re-assinging the containment:

    #592461
    Ivan Cazorla

    thank you for your help, I’ll see what I can do.

    thanks!
    ivan

    #592462
    David
    Staff
    Customer Support

    You’re welcome.

    #592464
    Ivan Cazorla

    What I am really trying to achieve is to make something similar as this: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html

    I’ve managed to display the product tabs in sequence and found a plugin called Woocommerce Custom Tabs that lets you add multiple tabs and using the GeneratePress editor I can set that own that to be full screen or contained.

    Seems that you need the buy the pro version of the plugin to let you really see the tabs you’ve created in the product page. So lame….

    cheers,
    Ivan

    #592706
    David
    Staff
    Customer Support

    If you can share a link then i’ll have a look to see if we can get it closer to the example, or whether another approach is necessary.

    #592844
    Ivan Cazorla

    Hi, this is one of the websites I would like to make that happen: https://www.avancesliberty.com/tienda-cocina-estela/

    Similar what this website does: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html

    thanks,
    ivan

    #592896
    David
    Staff
    Customer Support

    Let’s give this a shot:

    PHP Snippet to wrap gallery and summary

    add_action( 'woocommerce_before_single_product_summary', 'awp_before_woo_summary', 5 );
    function awp_before_woo_summary() {
    	echo '<div class="awp-woo-wrap grid-container">';
    }
    
    add_action( 'woocommerce_share', 'awp_after_woo_summary', 10 ); 
    function awp_after_woo_summary() {
    	echo '</div>';
    }

    And CSS:

    @media (min-width: 768px) {
    	.single-product .site {
    		max-width: 100% !important;
    	}
    	.single-product .woocommerce-breadcrumb,
    	.single-product .related.products {
    		max-width: 1100px !important;
    		margin-left: auto;
    		margin-right: auto;
    	}
    }
    #592898
    Ivan Cazorla

    hi,

    now I have everything wrapped and in full-screen mode.

    thanks,
    ivan

    #592902
    Ivan Cazorla

    How can I just make for example individual sections with different background colors?

    Like setting the description section with a grey background color?

    thanks,
    ivan

Viewing 15 posts - 1 through 15 (of 48 total)
  • You must be logged in to reply to this topic.