jlgargan Posted June 2, 2020 Share Posted June 2, 2020 Site URL: https://www.onehandsanitizer.com/ I have a background image at the top of my website (www.onehandsanitizer.com). It has my logo and the company slogan. It looks great on desktop but on mobile, most of the image gets cut off. I want the image to shrink to fit in the screen on mobile instead of cutting the sides off. I tried a few things in custom CSS. I was able to get the image to shrink by setting height: 50%; but that didn't shrink the parent container, leaving me with a bunch of white space where the picture used to be. I also tried finding the #yui_... ID for this section but couldn't find it. Not sure if that is cause this section only consists of a background image or not? Is there a way for me to shrink the image on mobile without having a bunch of whitespace underneath it? And if not, how would I go about having one background image on desktop and replacing it with another on mobile? A solution to either question would solve my problem. Thank you very much for any help! Link to comment
Solution tuanphan Posted June 2, 2020 Solution Share Posted June 2, 2020 Add to Home > design > Custom CSS @media screen and (max-width:767px) { .homepage section:first-child { height: 30vh !important; min-height: unset !important; } } jlgargan, polizzi, tom43654329 and 1 other 3 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
jlgargan Posted June 2, 2020 Author Share Posted June 2, 2020 Thank you so much, worked perfectly! Link to comment
Guest Posted October 10, 2020 Share Posted October 10, 2020 Hello, I found your really useful code helped me make my home page shrink it's header image. @media screen and (max-width:767px) { .homepage section:first-child { height: 30vh !important; min-height: unset !important; } } My question is: Can I do this for other pages? For example, my wedding portfolio page has the same design as my home page (a background image bled behind the site navigation bar) I want to shrink this image down on mobile version too. Is this possible? Link to comment
tuanphan Posted October 12, 2020 Share Posted October 12, 2020 On 10/11/2020 at 1:12 AM, nickmnickm said: Hello, I found your really useful code helped me make my home page shrink it's header image. @media screen and (max-width:767px) { .homepage section:first-child { height: 30vh !important; min-height: unset !important; } } My question is: Can I do this for other pages? For example, my wedding portfolio page has the same design as my home page (a background image bled behind the site navigation bar) I want to shrink this image down on mobile version too. Is this possible? Edit page > Add Code Block > Add this code <style> @media screen and (max-width:767px) { #page section:first-child { height: 30vh !important; min-height: unset !important; } } </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
eugenesoch Posted October 15, 2020 Share Posted October 15, 2020 @tuanphan hi there, can this be implemented for our page too? Tried your code and it doesn't seem to be working. the page in question is wearealive.co.uk/home Link to comment
tuanphan Posted October 16, 2020 Share Posted October 16, 2020 23 hours ago, eugenesoch said: @tuanphan hi there, can this be implemented for our page too? Tried your code and it doesn't seem to be working. the page in question is wearealive.co.uk/home Which image? 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
AndrewTFS Posted October 18, 2020 Share Posted October 18, 2020 On 10/12/2020 at 2:13 AM, tuanphan said: Edit page > Add Code Block > Add this code <style> @media screen and (max-width:767px) { #page section:first-child { height: 30vh !important; min-height: unset !important; } } </style> I've found this code to work well on every page I've created except for this store page: takeflightspirits.com/store. It's putting all of the sections on top of the actual store items. Any thoughts? Link to comment
tuanphan Posted October 21, 2020 Share Posted October 21, 2020 On 10/19/2020 at 3:25 AM, AndrewTFS said: I've found this code to work well on every page I've created except for this store page: takeflightspirits.com/store. It's putting all of the sections on top of the actual store items. Any thoughts? Have you solved it yet? 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
Guest Posted December 10, 2020 Share Posted December 10, 2020 On 10/12/2020 at 3:13 PM, tuanphan said: Edit page > Add Code Block > Add this code <style> @media screen and (max-width:767px) { #page section:first-child { height: 30vh !important; min-height: unset !important; } } </style> Hi @tuanphan, I tried applying this code for my other pages but it didnt work. I want to shrink my header background image to fit the intercept banner just like how it looks like on desktop. Apart from the home page, i need to apply this to the rest of the pages Can you help to take a look at my site? Thanks! Site URL: https://www.marketingfordogmoms.com/programs Link to comment
tuanphan Posted December 12, 2020 Share Posted December 12, 2020 On 12/10/2020 at 3:42 PM, irock4849 said: Hi @tuanphan, I tried applying this code for my other pages but it didnt work. I want to shrink my header background image to fit the intercept banner just like how it looks like on desktop. Apart from the home page, i need to apply this to the rest of the pages Can you help to take a look at my site? Thanks! Site URL: https://www.marketingfordogmoms.com/programs Hi. You mean remove space between image (dog & people) - header on mobile? 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
jk00723 Posted December 26, 2020 Share Posted December 26, 2020 On 10/18/2020 at 1:25 PM, AndrewTFS said: I've found this code to work well on every page I've created except for this store page: takeflightspirits.com/store. It's putting all of the sections on top of the actual store items. Any thoughts? Hi @tuanphan... I have the exact same question as AndrewTFS. I've used the following code on my store page and it works perfectly... the background image at the top is sized exactly as needed on mobile. However, the footer and any other section section then seems to be moved up and is jumbled in with the store/products section. I used the same code on other pages and am not having this problem, so I believe it may be an issue related to the store function. Any advice on how to fix? I can send my website url if needed. Thank you!! Code used: <style> @media screen and (max-width:767px) { #page section:first-child { height: 30vh !important; min-height: unset !important; } } </style> Link to comment
creedon Posted December 26, 2020 Share Posted December 26, 2020 15 hours ago, jk00723 said: I can send my website url if needed. Please post the URL to your store here. We can take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jk00723 Posted December 27, 2020 Share Posted December 27, 2020 (edited) 4 hours ago, creedon said: Please post the URL to your store here. We can take a look at your issue. Thanks, @creedon! Here is the link to the page in question: www.vicesandgoodies.com/goodies (it's setup properly in desktop view, but on mobile, the footer is moved up and stacked beneath the store/product section. Any tips are appreciated! *By the way, subject matter on the website is for 21+ 🙂 Edited December 27, 2020 by jk00723 Link to comment
creedon Posted December 27, 2020 Share Posted December 27, 2020 The following CSS is causing the issue you mention. You can remove it or modify it to more specifically target it. @media screen and (max-width: 767px) { #page section:first-child { height:60vh !important; min-height: unset !important } } Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jk00723 Posted December 28, 2020 Share Posted December 28, 2020 19 hours ago, creedon said: The following CSS is causing the issue you mention. You can remove it or modify it to more specifically target it. @media screen and (max-width: 767px) { #page section:first-child { height:60vh !important; min-height: unset !important } } Definitely moving in the right direction! My first goal was to have the background image in the header fit properly on mobile, which this CSS accomplishes. Do you know how I could modify it so that the rest of the page works properly? Link to comment
tuanphan Posted January 3, 2021 Share Posted January 3, 2021 (edited) On 12/28/2020 at 10:35 AM, jk00723 said: Definitely moving in the right direction! My first goal was to have the background image in the header fit properly on mobile, which this CSS accomplishes. Do you know how I could modify it so that the rest of the page works properly? Edit @creedon code to this, add to Goodies Page Header (I added > character into code) <style> @media screen and (max-width: 767px) { #page>section:first-child { height:60vh !important; min-height: unset !important } } </style> Edited January 3, 2021 by tuanphan 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
jk00723 Posted January 5, 2021 Share Posted January 5, 2021 On 1/3/2021 at 3:14 AM, tuanphan said: Edit @creedon code to this, add to Goodies Page Header (I added > character into code) <style> @media screen and (max-width: 767px) { #page>section:first-child { height:60vh !important; min-height: unset !important } } </style> Hi @tuanphan ... thank you for the reply! I pasted your code directly into the Goodies page header, but unfortunately, I can't seem to get it to work. For now, I've put the original code back in so that the header image is sized correctly. Are there any additional edits you can suggest so that the footer does not move up the page and appear behind my other sections? Thanks! Link to comment
tuanphan Posted January 7, 2021 Share Posted January 7, 2021 Remove creedon code & add code I edited above. 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
jk00723 Posted January 8, 2021 Share Posted January 8, 2021 20 hours ago, tuanphan said: Remove creedon code & add code I edited above. Sorry @tuanphan, I'm stuck. I've tried the steps that you suggested and used your exact code with the > added, but I still can't get it to work. I've placed the original code back in (without the >) just so that the image looks ok on mobile for the time being (even though the products section is still stacked above the footer). Any other edits you can suggest? Link to comment
Guest Posted January 10, 2021 Share Posted January 10, 2021 Hi @tuanphan, I've tried the code provided above and it definitely helps with the sizing but is there any way to for the mobile image to look exactly like the web? Here's my url where you can see the background image https://www.calebhetan.com/bose-sleepbuds If you have a solution, can you explain how you do it so I can apply it on other pages as well? Thank you!!! Link to comment
tuanphan Posted January 12, 2021 Share Posted January 12, 2021 On 1/8/2021 at 10:12 AM, jk00723 said: Sorry @tuanphan, I'm stuck. I've tried the steps that you suggested and used your exact code with the > added, but I still can't get it to work. I've placed the original code back in (without the >) just so that the image looks ok on mobile for the time being (even though the products section is still stacked above the footer). Any other edits you can suggest? Add to Page Header <style> @media screen and (max-width:767px) { #page>article>section:first-child { min-height: 50vh !important; } } </style> tom43654329 and jk00723 1 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
tuanphan Posted January 12, 2021 Share Posted January 12, 2021 On 1/10/2021 at 10:53 AM, ctan9 said: Hi @tuanphan, I've tried the code provided above and it definitely helps with the sizing but is there any way to for the mobile image to look exactly like the web? Here's my url where you can see the background image https://www.calebhetan.com/bose-sleepbuds If you have a solution, can you explain how you do it so I can apply it on other pages as well? Thank you!!! Add to Bose Page Header <style> @media screen and (max-width:767px) { #page section:first-child { min-height: 20vh; margin-top: 10vh; } } </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
jk00723 Posted January 12, 2021 Share Posted January 12, 2021 19 minutes ago, tuanphan said: Add to Page Header <style> @media screen and (max-width:767px) { #page>article>section:first-child { min-height: 50vh !important; } } </style> @tuanphan THANK YOU THANK YOU!!! That worked!! You're amazing 🙂 Link to comment
Guest Posted January 14, 2021 Share Posted January 14, 2021 On 1/11/2021 at 10:43 PM, tuanphan said: Add to Bose Page Header <style> @media screen and (max-width:767px) { #page section:first-child { min-height: 20vh; margin-top: 10vh; } } </style> @tuanphan Thank you! You the real MVP! 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