COUCHCREATIVECO Posted February 20, 2020 Share Posted February 20, 2020 Site URL: https://rockcreek-church-new.squarespace.com/ Hello all! I'm working on website for a client that is a church. Got everything pretty much laid out and designed. I go to mobile view however and all the banner images on the home page are cropped really bad and the CSS code I had didn't work. I want them to all rescale so you can see the banner image. Reasoning is because I do custom graphics for their banner images or I'm using their series graphics as banners etc. They want to be able to see all that on mobile with the custom graphic stuff. Can anyone help me. I've added screenshot of desktop version and what mobile looks like. Any help today would be AMAZING! Thanks! Link to comment
tuanphan Posted February 20, 2020 Share Posted February 20, 2020 what is access password? 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
COUCHCREATIVECO Posted February 20, 2020 Author Share Posted February 20, 2020 RC2020 Link to comment
barrysutton Posted February 26, 2020 Share Posted February 26, 2020 I have the same issue. Did you manage a fix? Would love to use the code as well. Link to comment
tuanphan Posted February 26, 2020 Share Posted February 26, 2020 1 minute ago, barrysutton said: I have the same issue. Did you manage a fix? Would love to use the code as well. If you share link, I can take a look. Yesterday I solved similar case, use New Image for Mobile with CSS Also, you can use CSS to resize image & height 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
barrysutton Posted February 26, 2020 Share Posted February 26, 2020 OK thanks, you'll see on my homepage barrysutton.com. When you go to mobile I would like to see the entire banner image, not just a crop. Link to comment
tuanphan Posted February 26, 2020 Share Posted February 26, 2020 26 minutes ago, barrysutton said: OK thanks, you'll see on my homepage barrysutton.com. When you go to mobile I would like to see the entire banner image, not just a crop. this image or? 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
barrysutton Posted February 26, 2020 Share Posted February 26, 2020 Yes, I would like to apply to any banner image so does not get cropped. Link to comment
COUCHCREATIVECO Posted February 26, 2020 Author Share Posted February 26, 2020 Thanks! Can you share a code for fixing this? 🙂 Link to comment
tuanphan Posted February 27, 2020 Share Posted February 27, 2020 25 minutes ago, barrysutton said: Yes, I would like to apply to any banner image so does not get cropped. Image like this? 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
barrysutton Posted February 28, 2020 Share Posted February 28, 2020 HI Sorry for the late reply yes! Link to comment
tuanphan Posted February 29, 2020 Share Posted February 29, 2020 21 hours ago, barrysutton said: HI Sorry for the late reply yes! I checked & found code yesterday & save code in my laptop. Unfortulately It has problems, I just bought new laptop I will check again later ☹️ 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 March 2, 2020 Share Posted March 2, 2020 On 2/28/2020 at 11:10 PM, barrysutton said: HI Sorry for the late reply yes! add to Home > Design > Custom CSS @media screen and (max-width:640px) { [data-section-id="5e3b0863c8261f7ac1caae2f"] .section-background img { object-fit: contain !important; } [data-section-id="5e3b0863c8261f7ac1caae2f"] { padding-top: 0 !important; min-height: 60vh !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
barrysutton Posted March 2, 2020 Share Posted March 2, 2020 5 hours ago, tuanphan said: add to Home > Design > Custom CSS @media screen and (max-width:640px) { [data-section-id="5e3b0863c8261f7ac1caae2f"] .section-background img { object-fit: contain !important; } [data-section-id="5e3b0863c8261f7ac1caae2f"] { padding-top: 0 !important; min-height: 60vh !important; } } Thanks so much - it works great. I really appreciate your commitment to helping so many SS users and developers. tuanphan 1 Link to comment
Elliscreates Posted August 20, 2020 Share Posted August 20, 2020 (edited) I'm having a similar issue with a slideshow reel on my homepage. Looks fine on desktop but on mobile all images and applied text are cropped out. I haven't published because it looks so bad... Help (please)! Edited August 20, 2020 by Elliscreates Link to comment
tuanphan Posted August 20, 2020 Share Posted August 20, 2020 1 hour ago, Elliscreates said: I'm having a similar issue with a slideshow reel on my homepage. Looks fine on desktop but on mobile all images and applied text are cropped out. I haven't published because it looks so bad... Help (please)! can you share link to page where you use reel? We can check easier. 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
Elliscreates Posted August 20, 2020 Share Posted August 20, 2020 it's https://www.elliscreates.com/home-1 THANK YOU! Link to comment
nw7063 Posted November 26, 2021 Share Posted November 26, 2021 Please can you help do the same for our website... www.soulfruit.co.uk We would like each page banner to not resize for mobile. Thank you so much. Link to comment
tuanphan Posted November 28, 2021 Share Posted November 28, 2021 On 11/26/2021 at 11:38 PM, nw7063 said: Please can you help do the same for our website... www.soulfruit.co.uk We would like each page banner to not resize for mobile. Thank you so much. You mean resize top banner on mobile on homepage? 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
nw7063 Posted November 29, 2021 Share Posted November 29, 2021 yes - for every banner on each page, so that it looks the same on mobile view. Thank you so much! Link to comment
tuanphan Posted November 30, 2021 Share Posted November 30, 2021 On 11/29/2021 at 2:52 PM, nw7063 said: yes - for every banner on each page, so that it looks the same on mobile view. Thank you so much! Hi. Each page will need a different code. If you still want, I will give the code for a page & give a quick guide to you apply on other pages nw7063 1 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
nw7063 Posted November 30, 2021 Share Posted November 30, 2021 yes please - thank you so much! our website is www.soulfruit.co.uk Link to comment
tuanphan Posted December 1, 2021 Share Posted December 1, 2021 On 11/30/2021 at 3:35 PM, nw7063 said: yes please - thank you so much! our website is www.soulfruit.co.uk Just recognize header will overlap some text in banner. How about resize banner & move it under header & set a background color for header? eg. 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
nw7063 Posted December 1, 2021 Share Posted December 1, 2021 We will be uploading new images today - and not having any text on the headers any more. Thank you so much for your help! Link to comment
nw7063 Posted December 1, 2021 Share Posted December 1, 2021 But that screenshot you took is exactly what we are trying to do for the mobile image size! I've just changed the banner image for the shop page. And going to change the rest today. If you were able to change the coding for each page to make the banner the same as the shop page that would be amazing. Thank you so much! 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