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

Store Design
, , , ,
1

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

featured product
featured product1883×943 130 KB

2

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

image
image1366×768 134 KB

image
image1366×768 141 KB

3

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;
    }
}

image
image1309×555 73.8 KB

5

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

6

@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;}
}
7

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;
  }
}

Screenshot 2025-12-18 at 1.39.11 PM
Screenshot 2025-12-18 at 1.39.11 PM1551×738 83.4 KB

8

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

9

@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

11

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

12

@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?

image
image1366×768 145 KB

13

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

14

@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

image
image1366×768 147 KB