Image with text - full width

Solved

Image with text - full width

orchiworld
Shopify Partner
30 0 5

How do I make this full width? 

image with text full width.png

Accepted Solution (1)
BSSCommerce-TA
Shopify Partner
124 24 24

This is an accepted solution.

@orchiworld you can follow these steps: 

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file base.css and add this css code below, in the top of the file:

 

main .shopify-section .page-width {
    max-width: unset !important;
    padding: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

 

Step 3: Click "save" button.

Here result: 

BSSCommerceTA_0-1719981507798.png

 

If it works, please mark my answer as solution. Thank you!

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 7 (7)

BSSCommerce-TA
Shopify Partner
124 24 24

@orchiworld, can you give me your store website url. Maybe I can help you. 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
orchiworld
Shopify Partner
30 0 5
BSSCommerce-TA
Shopify Partner
124 24 24

This is an accepted solution.

@orchiworld you can follow these steps: 

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file base.css and add this css code below, in the top of the file:

 

main .shopify-section .page-width {
    max-width: unset !important;
    padding: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

 

Step 3: Click "save" button.

Here result: 

BSSCommerceTA_0-1719981507798.png

 

If it works, please mark my answer as solution. Thank you!

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
orchiworld
Shopify Partner
30 0 5

This worked! Thank you. 

davidjahn
Tourist
18 0 1

Hello @BSSCommerce-TA 
I am trying to solve the same problem on my Symmetry Theme. But I don´t have a base.css file. I would like the images to fill 50% of the whole screen and also eliminate the gap between the pictures so that basically the corners of the two pictures just meet in the middle. Your help would be much appreciated.

Thank you!
www.apresjeudi.com

 

 

Bildschirmfoto 2024-08-22 um 20.36.12.png

Dan-From-Ryviu
Shopify Partner
11363 2227 2399

Hi @orchiworld 

Please add this code to Custom CSS in Online Store > Themes > Customize to do that 

.page-width:has(.image-with-text) { 
  max-width: 100%; 
  padding-left: 0; 
  padding-right: 0; 
}

Screenshot 2024-07-03 at 11.15.24.png

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

orchiworld
Shopify Partner
30 0 5

This doesn’t change anything on my end. 

also want to state that I want the whole thing including text on the right side, and image on the left side to be full width