Joomla Templates Club 406,261 posts

[kalycito Friend kalycitoJoin date: January 2017Posts: 14Downloads:8Uploads:2 Thanks: 2]

#1025524

Hi

I am using modern theme which is using one single image as the background image for the hero-unit.

But it is not responsive in mobile view.

Where should I change the code to make it responsive?

Best regards,
Kalycito

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1025607

Hi
Please share the URL of site Here, So that i can check this issue on your site.

Regards

[kalycito Friend kalycitoJoin date: January 2017Posts: 14Downloads:8Uploads:2 Thanks: 2]

#1025693

Hi,

Please see below URL,

http://www.ealerta.com

Regards,
Kalycito

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1025840

Hi
the background image is set the cover size and it will follow the size depends on the Text over it.
If you put the background size 100%
example code

.hero-unit {
    background: url(../../../images/banners/header-bg.jpg) no-repeat center top;
    background-size: 100%!important;
}

It will no longer follow the text height but gives you responsive view.

Regards

[kalycito Friend kalycitoJoin date: January 2017Posts: 14Downloads:8Uploads:2 Thanks: 2]

#1025910

Hi,

Please see the attached screenshot, the text is coming out the image. But I would like to have the text on top of the image and the image to be responsive or re-sized to mobile view.

Looking forward for your reply!

Regards,
Kalycito

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1025922

Hi
You can not make it on the image, because image is responsive and it will resize in small screen with respect to its width and height.
You have to remove use the background-size as cover to get the text on image.

Regards

[kalycito Friend kalycitoJoin date: January 2017Posts: 14Downloads:8Uploads:2 Thanks: 2]

#1026139

Hi

Can I get any sample code where the image and the text are responsive and the text appears on top of the image?

Or

The right hand side of the banner image where the gear is appearing can appear in the mobile instead of the plain grey side(left side of the banner image)?

Looking forward for your support.

Regards,
Kalycito

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1026152

Hi
With same text style, i am afraid you can not show the full image as its not possible, if image responsive it will resize.

You can replace below code in custom.css file

.hero-unit {
    background-size: cover;
}

with this code

.hero-unit {
    background-size: cover;
    background-position: right;
}

[Author]

Posts