How to make an image with text section full width?

How to make an image with text section full width?

Dtcedrico0m
New Member
14 0 0

Hi there, I'd like to make the top image with text section on my website full width.

 

Website: pasdepoison.nl

Ww: thiely

Replies 11 (11)

zaczee
Globetrotter
855 46 42

Hi,

 

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

 

.image-with-text { padding: 0; margin: 0; }

 

Dtcedrico0m
New Member
14 0 0

Does this affect other image with text sections I will use as well?

 

Dtcedrico0m
New Member
14 0 0

I added it to the section itself, it worked, however I'd like to get rid of the round borders

Podi_2024
Visitor
2 0 0

i have tried to add this code to the section itself and to the base.css didn't work.

Not sure what I am doing wrong here!

Store: https://monaelshanawanyjewellery.com/

ps: autaws

Podi_2024_0-1720415897452.png

 

websensepro
Shopify Partner
1053 149 156

Hi @Dtcedrico0m.

 

Follow These steps.

Go to the online store theme and go to base.css, custom.css or theme.css file paste the code mentiond below.

 

 

main#MainContent .image-with-text { padding: 0; margin: 0; }

 

 

 

 

Like this.

 

websensepro_2-1687422575811.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Dtcedrico0m
New Member
14 0 0

I added the code to the section itself. It worked, however I would like to get rid of the round borders on the bottom part of the section.

websensepro
Shopify Partner
1053 149 156

Add this code.

 

 

.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__content {
    border-radius: 0;
}
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__media {

    border-radius:0;
}

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Dtcedrico0m
New Member
14 0 0

Screenshot 2023-06-22 111238.png

I tried this, but didn't work. Where should I paste that code?

Dtcedrico0m
New Member
14 0 0

Padding and Margin did work fyi

Dtcedrico0m
New Member
14 0 0

Thanks it worked, pasted in base.css, however I'd like the section to have no round corners at all when people view it on desktop. Is that possible?

 

AliReviews
Shopify Partner
773 90 356

Hello @Dtcedrico0m ,

 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Assets folder -> base.css file or theme.scss.liquid file

Add this following code at the bottom of page

.hero-banner {
  position: relative;
  width: 100%;
  height: 300px;
  background-image: url("path/to/your/image.jpg");
  background-size: cover;
  background-position: center;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
}

.hero-content h1 {
  font-size: 32px;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ff0000;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}

.cta-button:hover {
  background-color: #cc0000;
}

Save changes

 

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!