Joomla Templates Club 406,261 posts

[crystalprint Friend crystalprintJoin date: June 2013Posts: 72Downloads:0Uploads:26 Thanks: 28]

#194869

Hi Guys,

I Have a question , is to possible to make the header_bg.gif Responsive ?
I made the header_bg.gif on a 23 inch monitor, but when i try to look at it on a smaller screen i lose allot of my image.
So is it possible to make it responsive ??

Kind regards

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#523069

I would also be interested in a solution to this.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#523105

Right now its difficult to suggest the solution to you. It would be awesome if you can possibly include URL of your site. I am happy to help you out.

[crystalprint Friend crystalprintJoin date: June 2013Posts: 72Downloads:0Uploads:26 Thanks: 28]

#523150

Thank you very much Ninja Lead, i have yust send you a PM

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#523336

<em>@crystalprint 411872 wrote:</em><blockquote>Thank you very much Ninja Lead, i have yust send you a PM</blockquote>

You can follow workaround below:

Open the templates/ja_onepage/css/custom.css file and add this css rule:

@media (max-width: 767px) {
.hero-unit {
width: 100%;
background-size: cover;
}
}


Or:
You can add small image with mobile layout as follows:

Open the templates/ja_onepage/css/custom.css file and insert background-image

@media (max-width: 767px) {
.hero-unit {
width: 100%;
background-size: cover;
background-image: url(../../../templates/ja_onepage/images/themes/metro/header_bg_mobile.gif);
}
}


The mobile image path should be: templates/ja_onepage/images/themes/metro/header_bg_mobile.gif

Hope it helps.

[crystalprint Friend crystalprintJoin date: June 2013Posts: 72Downloads:0Uploads:26 Thanks: 28]

#523626

Hi Ninja Lead,

No it doesn’t Work ..

The image is still the same width and lose quart of the image if i view it on a smaller screen.
Do you maybe have another solution?

kind regards.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#523971

I see the image templates/ja_onepage/images/themes/metro/header_bg_mobile.gif has very large size, why don’t use small one for better result on mobile layout.

[crystalprint Friend crystalprintJoin date: June 2013Posts: 72Downloads:0Uploads:26 Thanks: 28]

#524116

Hi Ninja Lead,

I made the image smaller but that doesnt make it better.
It only makes it worse , i see allot of pixels on my mobile or tablet.

kind regards

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#524233

Please try additional steps below:

Open the templates/ja_onepage/css/custom.css file

Change


@media (max-width: 767px) {
.hero-unit {
width: 100%;
background-size: cover;
background-image: url(../../../templates/ja_onepage/images/themes/metro/header_bg_mobile.gif);
}
}


To


@media (max-width: 767px) {
.hero-unit {
background-image: url(../../../templates/ja_onepage/images/themes/metro/header_bg_mobile.gif);
}
}

With image path: templates/ja_onepage/images/themes/metro/header_bg_mobile.gif and size: 289px x 395px

1 user says Thank You to Ninja Lead for this useful post

1. crystalprint

[Author]

Posts