- This topic has 8 replies, 2 voices, and was last updated 1 year, 6 months ago by
tikaram.
-
AuthorPosts
-
May 7, 2022 at 7:00 pm #304661
yoyoma
ParticipantHello,
Looking for help in using different images for website, tablet and mobile. I found the following in your various threads, but it doesn’t work:
@media screen and (min-width: 1025px) {
.custom-header.header-media {
background-image: url(“link goes here to library”) !important;
}
}
@media screen and (max-width: 500px) {
.custom-header.header-media {
background-image: url(“link goes here to library”) !important;
}
}Thanks.
May 8, 2022 at 8:39 am #304676tikaram
Keymaster@yoyoma : Please post in your site URL so that I can check and help you with the additional css.
Regards,Tikaram
May 9, 2022 at 12:37 am #304677yoyoma
ParticipantHello,
Website is https://wazoocrew.com.
I would like to make the mobile banner a little higher and have cropped the larger banner to give a larger view. The banner intended for mobile would have dimensions of 500 x 300, instead of whatever the responsiveness reduces the 1920 x 835 to.
Thanks for the help.
yym
May 9, 2022 at 1:08 pm #304736May 11, 2022 at 1:20 pm #304851yoyoma
ParticipantHello,
Just wanted to check back and inquire about possible solutions.
Thanks,
yym
May 23, 2022 at 12:35 am #305288yoyoma
ParticipantHello,
Have not heard back since May 9. Can someone help me with this?
Thanks kindly,
May 23, 2022 at 6:26 am #305293tikaram
Keymaster@yoyoma : Please try adding the following additional css and let me know if it works as desired or not.
@media only screen and (max-width: 768px) { .custom-header-media img { max-width: 150%; } }
Regards,
TikaramMay 23, 2022 at 2:35 pm #305296yoyoma
ParticipantHello Tikaram,
Just tried. No it does not work.
Is there any option to include a mobile specific header?
Thank you.
June 1, 2022 at 2:01 am #305670tikaram
Keymaster@yoyoma : The header image is supposed to be displayed as a background image from
.custom-header::before
But your site is displaying the header image from the following section
<div id="wp-custom-header" class="wp-custom-header">
</div>
It looks like you have made changes to the code. To display the different header image for mobile you can insert a different background image for
.custom-header::before
with the help of media query. Let me know if I can help you in any way.
Regards,
Tikaram -
AuthorPosts
- The topic ‘Different header images for web and mobile’ is closed to new replies.