Tagged: catch inspire, header media title
- This topic has 25 replies, 2 voices, and was last updated 4 years, 8 months ago by Skandha.
-
AuthorPosts
-
March 28, 2019 at 11:15 pm #168894catwingzParticipant
Or, as an alternative, please give me the code which will enable me to substitute another image for mobile and I will move on.
Thanks againMarch 29, 2019 at 2:45 am #168905SkandhaParticipant@catwingz: Hello there, Can you try the following?
Remove the following CSS Code.@media screen and (max-width:1000px) { .custom-header-media img { -o-object-fit:unset; object-fit:unset; } } .custom-header-content { padding:150px 0 !important; } @media screen and (max-width:767px) { .custom-header-content { padding:150px 20px; } }
Then add the following CSS Code.
.custom-header-media img { position:unset; } .custom-header-content { padding:0; }
Let me know if this works out!
Kind Regards,
SkandhaMarch 31, 2019 at 10:18 pm #169056catwingzParticipantHi Skandha,
After making those changes the desktop view is fine, but the view on mobile is still squashed horizontally.
Thanks
April 1, 2019 at 2:10 am #169070SkandhaParticipant@catwingz: Hello there,
Since you have a long-width banner image the image text will get squashed in smaller screens. I don’t think you can much about that. Maybe you can keep a different header image for smaller screens.Kind Regards,
SkandhaApril 1, 2019 at 4:24 pm #169096catwingzParticipantHello Skandha,
To recap, my banner image is smaller than the stock one which comes with the theme.
Stock: 1920px x 822px
Mine 1920px x 573px
Both are 72 ppi.I just tried out a fresh installation of the theme on another site with different hosting. In that scenario, instead of squashing the banner image on mobile, it crops it, treating it more like a background. Given this very different interpretation I am concerned we chose the wrong theme for this website.
Please give me the code which will allow me to substitute a different image for mobile and get past this problem.
Thank you
April 2, 2019 at 2:48 am #169130SkandhaParticipant@catwingz: Hello there,
Can you post in the URL of the site where the background image is cropping the way you like?To have a different image on smaller screens
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.@media screen and (max-width:600px) { .custom-header-content { background-image:url("https://catchthemes.com/demo/euphony-pro/wp-content/themes/euphony-pro/assets/images/header-image.jpg"); background-size:cover; } .no-header-media-text .custom-header-media img { display:none; } }
Replace the image URL with image of your choice.
Let me know if this helps you out!
Kind Regards,
Skandha -
AuthorPosts
- The topic ‘Resize header image’ is closed to new replies.