tuanphan Posted April 9, 2021 Share Posted April 9, 2021 On 4/7/2021 at 4:47 PM, hello2021 said: Site URL: https://www.garryrichardstud.com/hillstar-1 Hi there, @tuanphan I see you have been very helpful to all other comments in this thread and was wondering if you could help me. The banner image on my website looks great on desktop view, but it gets majorly cropped when I view it on mobile (see below). Any tips on why this is happening, and how resolve it? As the majority of our users will be coming to the site on mobile, it is important to have this image displaying correctly? Thanks Remove your code in Custom CSS, add this new code /* Hillstar 1 page */ @media screen and (max-width:767px) { [data-section-id="6065ab66929e10210ae97d44"] { min-height: 20vh !important; height: 25vh; } } 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
tuanphan Posted April 9, 2021 Share Posted April 9, 2021 On 4/8/2021 at 2:47 AM, BAA said: Hi @tuanphan I'm having the same issue. Text on my banners is cutoff and won't resize on mobile. Tried using your code above and doesn't seem to be working. Using 7.1. Website is edgecatering.ca. Add to Design > Custom CSS > Then save & reload your site /* resize mobile slideshow */ @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 30vh !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
tuanphan Posted April 9, 2021 Share Posted April 9, 2021 15 hours ago, Nipper said: Having the same issue, codes above don't seem to be aligning with me. @tuanphan do you have any suggestions? Thanks https://raspberry-coyote-6gss.squarespace.com/config/design I see mobile fine here. It looks like you solved the problem? 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
Emily88 Posted April 9, 2021 Share Posted April 9, 2021 Any suggestions for how the banner could resize for mobile. Thank you so much! https://www.makingcentsofsaving.com/ Link to comment
tuanphan Posted April 9, 2021 Share Posted April 9, 2021 36 minutes ago, Emily88 said: Any suggestions for how the banner could resize for mobile. Thank you so much! https://www.makingcentsofsaving.com/ Just answered in another post. You can check. 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
SashK Posted May 3, 2021 Share Posted May 3, 2021 (edited) @tuanphan I am having the same problem with the Brine template (version 7.0). I have tried the different solutions but they aren't working for me. i have parallax scrolling enabled. The banner on my homepage cuts off on the mobile version. I am in the process of changing my site so the new version isn't live yet. I only want to change the banner on the homepage as other banners on other pages work fine. Can you help me with the custom CSS that I need to fix it? Thanks! Edited May 3, 2021 by SashK added a thank you Link to comment
tuanphan Posted May 4, 2021 Share Posted May 4, 2021 20 hours ago, SashK said: @tuanphan I am having the same problem with the Brine template (version 7.0). I have tried the different solutions but they aren't working for me. i have parallax scrolling enabled. The banner on my homepage cuts off on the mobile version. I am in the process of changing my site so the new version isn't live yet. I only want to change the banner on the homepage as other banners on other pages work fine. Can you help me with the custom CSS that I need to fix it? Thanks! Can you share site url? 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
SashK Posted May 4, 2021 Share Posted May 4, 2021 17 minutes ago, tuanphan said: Can you share site url? I am changing my site template (from Flatiron to Brine) so the new version isn't live yet. Do I need to make it live so you can look at it? Or is there another way? Thanks so much! Link to comment
tuanphan Posted May 6, 2021 Share Posted May 6, 2021 On 5/4/2021 at 2:57 PM, SashK said: I am changing my site template (from Flatiron to Brine) so the new version isn't live yet. Do I need to make it live so you can look at it? Or is there another way? Thanks so much! No. Just setup password & share url. You can see the guide in my signature. 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
lmnicoll99 Posted May 6, 2021 Share Posted May 6, 2021 @tuanphan I am having the same issue where the face of the person in the photo is cut out on mobile because of the cropping of the banner image. In Bedford Template. None of the codes have worked for me thus far. The site is https://www.hardenforcongress.com/ Link to comment
SashK Posted May 6, 2021 Share Posted May 6, 2021 7 hours ago, tuanphan said: No. Just setup password & share url. You can see the guide in my signature. Hi @tuanphan I have done it Url: www.moganddogtravels.com Password: test12345 Thanks so much for your help 🙂 Link to comment
tuanphan Posted May 7, 2021 Share Posted May 7, 2021 22 hours ago, lmnicoll99 said: @tuanphan I am having the same issue where the face of the person in the photo is cut out on mobile because of the cropping of the banner image. In Bedford Template. None of the codes have worked for me thus far. The site is https://www.hardenforcongress.com/ Hi. Which image? I don't see person in top home banner 22 hours ago, SashK said: Hi @tuanphan I have done it Url: www.moganddogtravels.com Password: test12345 Thanks so much for your help 🙂 Add to Design > Custom CSS > Then save & reload your site /* resize mobile home top banner */ @media screen and (max-width:767px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !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
SashK Posted May 8, 2021 Share Posted May 8, 2021 On 5/7/2021 at 4:05 PM, tuanphan said: Add to Design > Custom CSS > Then save & reload your site /* resize mobile home top banner */ @media screen and (max-width:767px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; } } Hi @tuanphan Thanks so much! I just realised something - this works but the homepage banner on my site is the only one that resizes horizontally and I've just realised that this makes the banner image really small on mobile. Is there a way to make it resize vertically like it does on other pages and keep the focus on the two people in the image. I will attach screenshots of what I mean. Here is an example of another page of the site and how it resizes for mobile view. I'd like the image on the homepage to resize like this if possible otherwise it looks too small. Thanks so much for your help! Link to comment
tuanphan Posted May 9, 2021 Share Posted May 9, 2021 20 hours ago, SashK said: Use this code @media screen and (max-width: 767px) { body.homepage .Parallax-item:first-child img { top: -100px !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
SashK Posted May 9, 2021 Share Posted May 9, 2021 (edited) 1 hour ago, tuanphan said: Use this code @media screen and (max-width: 767px) { body.homepage .Parallax-item:first-child img { top: -100px !important; } } Hi @tuanphan, it still seems to resize it horizontally instead of vertically like on the other banner pages (I've attached a screenshot). Is there a way to change it so it appears the same way as the Australia banner/my other page banners on mobile? This is the only page on my site that seems to resize the banner image to mobile in a strange way...is it because it is an index page? Thanks again for all your help! Edited May 9, 2021 by SashK Link to comment
PixieDuster Posted May 11, 2021 Share Posted May 11, 2021 (edited) Hi @tuanphan Can you help me with my mobile banner as well? http://www.danipatrey.com/ I just don't want the top cut off. I'm ok with the cropping on the sides. Edited May 11, 2021 by PixieDuster Link to comment
tuanphan Posted May 12, 2021 Share Posted May 12, 2021 On 5/11/2021 at 12:22 PM, PixieDuster said: Hi @tuanphan Can you help me with my mobile banner as well? http://www.danipatrey.com/ I just don't want the top cut off. I'm ok with the cropping on the sides. Answered your email 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
tuanphan Posted May 12, 2021 Share Posted May 12, 2021 On 5/9/2021 at 10:13 PM, SashK said: Hi @tuanphan, it still seems to resize it horizontally instead of vertically like on the other banner pages (I've attached a screenshot). Is there a way to change it so it appears the same way as the Australia banner/my other page banners on mobile? This is the only page on my site that seems to resize the banner image to mobile in a strange way...is it because it is an index page? Thanks again for all your help! Hi. Remove code I sent & I will check it again https://www.moganddogtravels.com/ 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
SashK Posted May 12, 2021 Share Posted May 12, 2021 1 hour ago, tuanphan said: Hi. Remove code I sent & I will check it again https://www.moganddogtravels.com/ Okay, thanks I have done this 🙂 Link to comment
Mr-WOODLVING Posted June 21, 2021 Share Posted June 21, 2021 HI @tuanphan I'm having some trouble adjusting the banner images on my website for mobile viewing. I have come a good way, but I'm not there. WOODLIVING.DK My goal is to have a better scaled banner image for mobile view. a) If the scrolling can be intact its good, b) if the result is a static image its ok. I can scale the image and make it static, goal b), but I have not get it to center. The code I'm using: /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ div#block-yui_3_17_2_1_1600111915062_4197 { display: none; } .sqs-block-image { width: 80%; margin: 0 auto; } .homepage section:first-child { height: 30vh !important; margin: 0 auto; min-height: unset !important; } .homepage .Parallax-item:first-child figure { transform: unset !important; top: 0px !important; width: 100vw !important; margin: auto auto !important; } .homepage .Parallax-item:first-child img { width: 450px imortant; height: auto important; margin: Auto auto; left: unset !important; } /* Insert Code for Mobile Above This Line */ } Link to comment
tuanphan Posted June 21, 2021 Share Posted June 21, 2021 1 hour ago, Mr-WOODLVING said: HI @tuanphan I'm having some trouble adjusting the banner images on my website for mobile viewing. I have come a good way, but I'm not there. WOODLIVING.DK My goal is to have a better scaled banner image for mobile view. a) If the scrolling can be intact its good, b) if the result is a static image its ok. I can scale the image and make it static, goal b), but I have not get it to center. The code I'm using: /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ div#block-yui_3_17_2_1_1600111915062_4197 { display: none; } .sqs-block-image { width: 80%; margin: 0 auto; } .homepage section:first-child { height: 30vh !important; margin: 0 auto; min-height: unset !important; } .homepage .Parallax-item:first-child figure { transform: unset !important; top: 0px !important; width: 100vw !important; margin: auto auto !important; } .homepage .Parallax-item:first-child img { width: 450px imortant; height: auto important; margin: Auto auto; left: unset !important; } /* Insert Code for Mobile Above This Line */ } Hi. I see the image looks fine on mobile now. Did you solve? If no, can you explain clearly? 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
Mr-WOODLVING Posted June 21, 2021 Share Posted June 21, 2021 It looks ok on my mobile, but on a mobile with a different screen resolution it looks different. I would like to have the image centered, so I can make is look better on different screen resolutions. Link to comment
Mr-WOODLVING Posted June 21, 2021 Share Posted June 21, 2021 2 hours ago, tuanphan said: Hi. I see the image looks fine on mobile now. Did you solve? If no, can you explain clearly? I solved it. transform: unset !important; in the img section made is center. /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ div#block-yui_3_17_2_1_1600111915062_4197 { display: none; } .sqs-block-image { width: 80%; margin: 0 auto; } .homepage section:first-child { height: 300px !important; margin: 0 auto important; min-height: unset !important; } .homepage .Parallax-item:first-child figure { transform: unset !important; top: 0px !important; width: 100vw !important; margin: auto auto !important; } .homepage .Parallax-item:first-child img { transform: unset !important; width: auto imortant; height: auto important; margin: Auto auto important; } /* Insert Code for Mobile Above This Line */ } Link to comment
SouthernSunEvents Posted June 29, 2021 Share Posted June 29, 2021 popping on this thread because I'm having a similar problem. Looking to bump the focus of this image up a little bit to have more sky included. I've messed with the position coding for a while now and can't seem to get things to shift up a bit. Any ideas? Also looking to make the nav bar transparent for mobile if possible. Thanks! Link to comment
tuanphan Posted July 1, 2021 Share Posted July 1, 2021 On 6/29/2021 at 10:55 PM, SouthernSunEvents said: popping on this thread because I'm having a similar problem. Looking to bump the focus of this image up a little bit to have more sky included. I've messed with the position coding for a while now and can't seem to get things to shift up a bit. Any ideas? Also looking to make the nav bar transparent for mobile if possible. Thanks! What is site url? 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
Create an account or sign in to comment
You need to be a member in order to leave a comment