How to make an image with text section full width?

[Dtcedrico0m]

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

Website: pasdepoison.nl

Ww: thiely

[zaczee]

Hi,

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

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

[Dtcedrico0m]

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

[Dtcedrico0m]

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

[Podi_2024]

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

[websensepro]

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.

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

[Dtcedrico0m]

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]

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!

[Dtcedrico0m]

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

[Dtcedrico0m]

Padding and Margin did work fyi

[Dtcedrico0m]

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?

[Kudosi-Tracy]

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.