Joomla Templates Club 406,261 posts

[calavaro Friend calavaroJoin date: August 2013Posts: 125Downloads:7Uploads:34 Thanks: 28 Thanked: 24 times in 1 posts]

#193435

Hi,

How can I change an image (in this case, the header image) based on screen resolution?
I need a different image for mobiles, another for tablets and yet one more for desktop. How can I achieve this?

Thanks.

All the best,

Calavaro

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517283

Hi Calavaro,

I suppose that you want to use different logo image in mobile/tablet/desktop (as in our demo site, there is only one image in header and it’s logo). You can use media jQuery to define specific CSS rule for specific screen resolution associated with above devices. http://code-tricks.com/css-media-queries-for-common-devices/

What you need is creating a new file named custom.css in /templates/ja_template_name/css folder and add this:


@media (max-width: 768px) {
.logo-image a {
background: url("../path/to/logo/here");
/*add your own custom CSS*/
}
}


Hope this helps

[calavaro Friend calavaroJoin date: August 2013Posts: 125Downloads:7Uploads:34 Thanks: 28 Thanked: 24 times in 1 posts]

#517341

Hi,

Thanks for the suggestion. However, my header is a new module position I have created.
I created 2 more new module positions for tablet header and mobile header, and I have been able to display them with the @media codes.

However, for some reason I can not disable the displaying of the new modules using @media for resolutions over 1200px width.

Anything between 768px and 1199px the code to not display the module positions work. Anything over 1200px width, and the tablet and mobile modules display.

I have the following code in custom.css (I’m using the “red” template color)
@media (min-width: 768px) {
.ja-top-tab .ja-top-mobile .custom img {
display: none !important;
}

How do I disable the module to display for 1200px or wider without disabling it for 767px or less width?

Thank you for your help.

All the best,

Calavaro

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517482

With screens with size over 1200px, this CSS rule would help:

@media (min-width : 1200px) {
/* let's do somethin' */
}


[calavaro Friend calavaroJoin date: August 2013Posts: 125Downloads:7Uploads:34 Thanks: 28 Thanked: 24 times in 1 posts]

#518821

I solved it by using my custom header position for anything larger than 768px width, and using the standard logo position for anything smaller.

[Author]

Posts