Docs

[Sandra]

Hey there,

I have been struggling for a while to achieve a responsive typing text on responsive hero image (section background). I searched the forum and the FB group.

Here my css so far:

.heroimage {
position: relative;
}

.herotext {
letter-spacing: 1.5px;
font-weight: 500;
color: #f9b330 !important;
text-shadow: 0 1px 0 #3C4544;
position: absolute;
display: inline-block;
top: 500px;
left:-40px;
padding: 0px 10px 0px 10px;
background: rgba(60, 69, 68, 0.55);
}

And my site https://www.pmetools.ch

Ideally, I would like:
– the image to be responsive
– the text to display at the bottom on desktop and wrapped left over the full image on mobile.

Thanks for helping me out!

Cheers,

Sandra

[Christopher]

Hi there,

Please update your code to :

.herotext {
letter-spacing: 1.5px;
font-weight: 500;
color: #f9b330 !important;
text-shadow: 0 1px 0 #3C4544;
display: inline-block;
padding: 0px 10px 0px 10px;
background: rgba(60, 69, 68, 0.55);
    left: -40px;
position:relative;
}

Remove inline CSS height: 60vh; from section #1 and add padding: 100px 0px 39px; in its style field.

Hope it helps.

[Sandra]

Thanks.

The text works fine, but the image is cut now https://pmetools.ch/

Thanks again.

[Rue Nel]

Hello There,

The text is cut because it is positioned -40 pixels to the left. TO resolve this issue, please also add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 767px){
  .herotext {
    left: 0;
  }
}

We would loved to know if this has work for you. Thank you.

[Sandra]

thanks Rue. Done!

It’s actually the image that is cut top and bottom (see snip)

[Sandra]

Here the snip again

[Rue Nel]

Hello There,

Thanks for updating in! Your image were cut off because the image is a background image and not as an image element. To fully understand how background images works within the section, please check out this topic: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

Hope this helps.

[Sandra]

Thanks Rue. I afraid it doesn’t as background-image: cover; has no effect.

Will continue to search…

[Christopher]

Hi there,

Please change section’s padding to 275px 0px 110px.

Hope it helps.

[Sandra]

There must be another issue, because even if I put padding 1000px 0px 1000px !important; the image remains small…

Here again the css I have

/* hero image and text */

.heroimage {
position: relative;
}

.herotext {
letter-spacing: 1.5px;
font-weight: 500;
color: #f9b330 !important;
text-shadow: 0 1px 0 #3C4544;
display: inline-block;
padding: 0px 10px 0px 10px;
background: rgba(60, 69, 68, 0.55);
left: -40px;
position:relative;
}

@media(max-width: 767px){
.herotext {
left: 0;
}
}

[Christopher]

Please see the attachment, by adding padding, the image is being displayed fine.

Would you please check again and confirm me?

Thanks.

[Sandra]

Yes, it does 😉

Sorry for the hassle and have a good weekend!

[Rue Nel]

No Problem. We were always here to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts