Text inside image banner is not responsive

[goodtimesmag]

Hi swiftideas team,

I used the image banner swiftcode an placed a text inside the banner. On my standard desktop everything looks great (see the image attached “good”, but when display size changes the text inside the banner is sometimes out of the banner (see image attached “bad”).

This is the live URL for you to test it: http://goodtimesdeals.de/ueber-goodtimesdeals/

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.sf-image-banner > img {
  min-height: 420px;
  object-fit: cover;
}

But that will apply to all image banners, if you have image banners with different heights you will need to add an extra class to the image banner and replace .sf-image-banner with .yourextraclass

– Kyle

[goodtimesmag]

Hi Kyle,

thanks for the code, but the result is not always perfect, as you can see on the screenshot.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add:

@media only screen and (max-width: 479px) { 
.sf-image-banner > img {
  min-height: 500px;
  object-fit: cover;
}
}

– Kyle

[goodtimesmag]

Thanks Kyle, so far it looks good.

But I have recognized on the same site on my iPhone 5s that I have again the issue, that my H1 text is out of display (see screenshot)

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Please remove the strong tags for the text as you’re using h1

– Kyle

[goodtimesmag]

Alright, thanks for the quick answer!

[Kyle – SUPPORT]

No problem