TheIDBootCamp Posted December 13, 2019 Share Posted December 13, 2019 Hello, Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image. Thanks in advance. Link to comment
tuanphan Posted December 13, 2019 Share Posted December 13, 2019 Can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TheIDBootCamp Posted December 13, 2019 Author Share Posted December 13, 2019 Hi tuanphan, My apologies for not linking it: https://www.thecrossleyidbootcamp.com/ Thanks, Holly Link to comment
tuanphan Posted December 16, 2019 Share Posted December 16, 2019 On 12/14/2019 at 12:51 AM, TheIDBootCamp said: Hi tuanphan, My apologies for not linking it: https://www.thecrossleyidbootcamp.com/ Thanks, Holly Have you solved yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TheIDBootCamp Posted December 16, 2019 Author Share Posted December 16, 2019 No, we have not solved the issue yet. We think the image needs to be resized, but aren't sure why that's the case. Thanks. sjet 1 Link to comment
tiffa Posted December 22, 2019 Share Posted December 22, 2019 I'm having the same problem 😞 Link to comment
Solution tuanphan Posted January 5, 2020 Solution Share Posted January 5, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .homepage .section-background img { width: 100% !important; height: auto !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Upside Posted March 10, 2020 Share Posted March 10, 2020 @tuanphan any idea how to modify this code snippet to only affect the first banner image on an index homepage? When I use the snippet as-is, it affects all section background images on the homepage index. I only want the first one changed. Do I have to add the block ID or the hash-tagged section name? Thanks! Link to comment
tuanphan Posted March 10, 2020 Share Posted March 10, 2020 19 minutes ago, Upside said: @tuanphan any idea how to modify this code snippet to only affect the first banner image on an index homepage? When I use the snippet as-is, it affects all section background images on the homepage index. I only want the first one changed. Do I have to add the block ID or the hash-tagged section name? Thanks! Can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Upside Posted March 10, 2020 Share Posted March 10, 2020 https://meals-on-wheels-ls.squarespace.com/ pw: mowls Link to comment
Upside Posted March 10, 2020 Share Posted March 10, 2020 (edited) The changes in 7.1 have totally screwed me up. Apparently they aren't index pages anymore on certain templates. Edited March 10, 2020 by Upside Link to comment
tuanphan Posted March 10, 2020 Share Posted March 10, 2020 3 minutes ago, Upside said: The changes in 7.1 have totally screwed me up. Apparently they aren't index pages anymore on certain templates. @media screen and (max-width:640px) { [data-section-id="5e5d461757cae6512002d1c0"] .section-background img { width: 100% !important; height: auto !important; } } FocusVBS and Upside 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Upside Posted March 10, 2020 Share Posted March 10, 2020 Perfect, thank you @tuanphan! Link to comment
BrandonAnthony Posted March 25, 2020 Share Posted March 25, 2020 On 1/5/2020 at 4:01 AM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .homepage .section-background img { width: 100% !important; height: auto !important; } } This Worked for me, except I have a video that shows resized in editing but now has a grey dead space. And video will not not show on actual mobile site. Is there a fix for this? http://TheBrandonAnthony.com Link to comment
derricksrandomviews Posted March 25, 2020 Share Posted March 25, 2020 (edited) Video banners don't play on mobile, too large too slow to load who knows. I use a backup still image. Here is an example, if you see the mobile on your phone turned either way it will be a very pleasant surprise to me. Look at it on a laptop first. https://www.dcmrblueridge.com/ Edited March 25, 2020 by derricksrandomviews Link to comment
Lisasumthin Posted April 1, 2020 Share Posted April 1, 2020 (edited) Hello, I am getting a large space underneath my header photo when using the code above https://articlesofados.com/ Edited April 2, 2020 by Lisasumthin Link to comment
tuanphan Posted April 1, 2020 Share Posted April 1, 2020 7 hours ago, Lisasumthin said: Hello, I am getting a large space underneath my header photo when using the code above Can you share link to page in screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TORquED Posted April 1, 2020 Share Posted April 1, 2020 Exactly the same issue. The banner image and the 4 subsequent title images don't resize on mobile. On desktop it looks fine. Here's the link to the website - https://www.wildeversegame.com/ Link to comment
Lisasumthin Posted April 2, 2020 Share Posted April 2, 2020 On 4/1/2020 at 4:59 AM, tuanphan said: Can you share link to page in screenshot? https://articlesofados.com/ Link to comment
tuanphan Posted April 5, 2020 Share Posted April 5, 2020 On 4/3/2020 at 2:43 AM, Lisasumthin said: https://articlesofados.com/ Add to Home > Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5e5c9aff118337590dcf052e"] { min-height: 40vh !important; } } Lisasumthin 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Lisasumthin Posted April 6, 2020 Share Posted April 6, 2020 17 hours ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5e5c9aff118337590dcf052e"] { min-height: 40vh !important; } } Thank you!! it worked. Link to comment
BLamprou Posted April 7, 2020 Share Posted April 7, 2020 (edited) Im having the same problem with the Foster template. The hero banner on my homepage will not resize for mobile. This is a 7.0 template. Could someone please help me with the custom CSS code for this to fix it? safonovaparkcity.com Thanks! @tuanphan Can you please help me? I PM'd you also. Thanks! Edited April 13, 2020 by BLamprou Added info Link to comment
Guest Posted April 8, 2020 Share Posted April 8, 2020 @tuanphan I hope you are well during this time. I've seen your posts/suggestion for adding to custom css for mobile view, but it's not resizing for me. Would you be able to tell me what I have to modify for the first parallax image to resize for mobile? Also I'm trying to resize the page's with the images to 2/3 their height and not the full, but nothing I'm trying is working. This is my website.. www.rudycatwell.com Link to comment
tuanphan Posted April 11, 2020 Share Posted April 11, 2020 On 4/9/2020 at 6:16 AM, RUDECAT said: @tuanphan I hope you are well during this time. I've seen your posts/suggestion for adding to custom css for mobile view, but it's not resizing for me. Would you be able to tell me what I have to modify for the first parallax image to resize for mobile? Also I'm trying to resize the page's with the images to 2/3 their height and not the full, but nothing I'm trying is working. This is my website.. www.rudycatwell.com Where image? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
RAD_Design Posted April 21, 2020 Share Posted April 21, 2020 Hi guys, having a similar issue here as the other posters... All banners are scaling properly on my site in mobile, except for one! I've read through a million articles and posts on here, played with code and am still having trouble. Would anyone be able to have a look for me and see where I'm going wrong!? I just don't have the tech abilities to understand it. URLs is: https://gopher-mackerel-pen5.squarespace.com/contactPW: HIP2020! There is a lot of code in the Custom CSS panel from previous designer building it, not mine btw. Thanks in advance! Jay. 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