How do I make the featured product section of dawn theme go full width?

[SweatFree]

Hi my website is Sweat Free Telecom: www.sweatfree.co

The featured section is Sweat Free Telecom: stay connected in an outage & avoid roaming fees! – SWEAT FREE TELECOM

I want the right part of the featured section to take the full right side. But it wraps around. How can I make it take the full width?

Screenshot attached. I want the text to go all the way to the right side in the direction of white arrows

[suyash1]

@SweatFree both will move to respective sides, will it be ok? before after like the screenshots below

[devcoders]

Hi @SweatFree

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottow of the file:

@media screen and (min-width: 990px) {
    .featured-product:not(.product--no-media)>.product__info-wrapper {
       padding: 0 0 0 5rem!important;
    }
}

[SweatFree]

(post deleted by author)

[SweatFree]

Yes, that would work! But sorry what code should I use to do that? @suyash1

[suyash1]

@SweatFree please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

@media screen and (min-width: 1199px) {
 .page-width {max-width:100% !important;}
.product__info-container {max-width: 100rem !important;}
}

[tim_1]

I would suggest this code. You can paste it into sections “Custom CSS” setting (would need change to work elsewhere):

@media (min-width:990px) {
 .product__info-wrapper.grid__item {
    width: 50vw;
    margin-right: calc(50% - 50vw);
    max-width: 50vw;
  }
  
  .product__info-container {
    max-width: none;
  }
}

To make it work in your stylesheet it needs to be

Like this

@media (min-width:990px) {
  [id*=featured] .product__info-wrapper.grid__item {
    width: 50vw;
    margin-right: calc(50% - 50vw);
    max-width: 50vw;
  }
  
  [id*=featured]  .product__info-container {
    max-width: none;
  }
}

[SweatFree]

And one final question @suyash1 how do I change/adapt the code to use it on the product page as well?

[suyash1]

@SweatFree can you please share the product page link? , that page-width css will be applied throughout the site, but product page may have different class for content

[SweatFree]

(post deleted by author)

[SweatFree]

The product page is this: GET YOUR SAFETY NET: Multi-Network Data eSIM that does NOT expire + 91 – SWEAT FREE TELECOM

Also, sorry one last thing after your help with the product page width:

How do I make the header and menu on the header full width as well? @suyash1

[suyash1]

@SweatFree - previously given css should work for the product page as well,

for header and menu, it is been set in the center, if you add more menu items to it, then it will take space around automatically, or you want like this?

[SweatFree]

I just want to make sure that the menu takes the width and if you’re saying it will then that is great.

Just checking atleast from the screenshot the product page doesn’t seem to take the full width. Just making sure that it will?

Also, for the variants in the product, is it possible for it to be only one variant per line for the Countries & Networks? @suyash1

[suyash1]

@SweatFree please apply my given css and product page will also be full width, to have country on each line, please add this css

variant-selects .product-form__input{display: flex; flex-wrap: wrap; flex-direction: column;}

should look like this