golovemd Posted October 1, 2020 Share Posted October 1, 2020 Site URL: http://www.extremeelectronics.net/blog-1 I created a box below the header and added a image set to Full Bleed on most of my pages. Its a bit challenging with some images as you don't have a lot of control of how it displays. However, I have it how I want on the pages for the post part, on a computer browser. I noticed that on my blog page, the image on mobile does not display correctly. It's an image that say BLOG, and on mobile, it only displays LO as it is stretched off the screen. It is fine in landscape mode, but when in Portrait, the way everyone uses their phone, LO is what displays. Is there anyway to adjust this? Link to comment
golovemd Posted October 6, 2020 Author Share Posted October 6, 2020 Hoping there is a way to resize the image just on Mobile so it fits. Would be nice if there was a resizing tool in the software, per mobile versus standard browser Link to comment
tuanphan Posted October 8, 2020 Share Posted October 8, 2020 Add to Page Settings > Advanced > Header <style> /* resize banner mobile */ @media screen and (max-width:767px) { #page section:first-child { min-height: unset; height: 30vh; margin-top: 5vh; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
andynnc Posted October 23, 2020 Share Posted October 23, 2020 Hi there @tuanphan. I must have tried 30-40 different code solutions that you've shared with others here. I haven't quite been able to crack my banner for mobile. Please can you help? Images below. And url is: https://www.nevernotcreative.org/internships Thanks! Link to comment
tuanphan Posted October 24, 2020 Share Posted October 24, 2020 On 10/23/2020 at 8:56 PM, andynnc said: Hi there @tuanphan. I must have tried 30-40 different code solutions that you've shared with others here. I haven't quite been able to crack my banner for mobile. Please can you help? Images below. And url is: https://www.nevernotcreative.org/internships Thanks! Add to Home > Design > Custom CSS /* Internships banner */ @media screen and (max-width:640px) { body#collection-5e7ad74d4f074574bc75e374 { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { bottom: 0 !important; top: 0 !important; transform: unset !important; } section#new-page-79 { min-height: unset !important; height: 190px; } } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
andynnc Posted October 25, 2020 Share Posted October 25, 2020 Thank you so much. Works perfectly. Really appreciate you taking the time to help! @tuanphan Link to comment
VarunP Posted May 19, 2021 Share Posted May 19, 2021 Hey @tuanphanI'm having the same issue do you think you can help me? Website link - www.varunpuskur.com/shop Thank you! Link to comment
tuanphan Posted May 20, 2021 Share Posted May 20, 2021 On 5/19/2021 at 4:39 PM, VarunP said: Hey @tuanphanI'm having the same issue do you think you can help me? Website link - www.varunpuskur.com/shop Thank you! I remember I answered this question, via forum or email??? Add to Design > Custom CSS /* resize shop banner */ @media screen and (max-width:767px) { body#collection-6013c66755f7ed4faa5ceedd article section:first-child { min-height: unset !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
VarunP Posted May 30, 2021 Share Posted May 30, 2021 Thank you so much @tuanphan do you have any code for the image to start under the header? Link to comment
tuanphan Posted June 3, 2021 Share Posted June 3, 2021 On 5/30/2021 at 12:36 PM, VarunP said: Thank you so much @tuanphan do you have any code for the image to start under the header? You mean image under graphic digital prints? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
VarunP Posted June 4, 2021 Share Posted June 4, 2021 I mean something like this... The image is starting under the header and the header has a solid color to it. Thank you @tuanphan! As you can see below. The homepage image is starting under the logo and header. Link to comment
tuanphan Posted June 8, 2021 Share Posted June 8, 2021 On 6/4/2021 at 12:40 PM, VarunP said: I mean something like this... The image is starting under the header and the header has a solid color to it. Thank you @tuanphan! As you can see below. The homepage image is starting under the logo and header. ah okay. You want this on mobile only or all devices? If mobile, add this to Design > Custom CSS /* Shop page header */ @media screen and (max-width:767px) { body.collection-type-products.view-list header#header { position: relative; background-color: grey !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.