Rmarkjr Posted February 14 Share Posted February 14 (edited) Hello! I am needing help and I am trying and learn a few things. 1) I would like to know how to find the right selector for the background image so I can alter it for mobile. (page specific, not global) 2) How to resize it so that it fits on mobile, and if possible, how to position it. 3) Set a min or max height. 4) Change the text size so that it fits on the screen better for mobile. 5) I have multiple pages that I need to change so maybe how to select multiple pages or something. 6) anything else that is helpful to make it look good that I don't know about **This would be page specific and not global** If someone could give me an example of the mobile code for High-End Ceramic Coating Service In Owasso, OK - Kaliber Auto Detailing to make that car image fit along with the text and the background does not take up the whole screen, with the car in the right position.. that would be awesome. Another example would be https://www.kaliberautodetailing.com/paint-polishing I don't think I need the code so much for this one as much as I am interested to see how the selector differs from the first one. I do have that find Squarespace Id's extension, but I don't think that is showing me everything. a huge thank you for any help with this! NOTE: I have attached an image of how it looks on my screen, which is a Samsung S23 Ultra. Squarespace preview shows it just a tad wider than this with the words "Ceramic Coating" on one line instead of two. We can see the car is cut off... there is a lot of black dead space from the image, and the text is way too big Edited February 14 by Rmarkjr added picture Link to comment
tuanphan Posted February 17 Share Posted February 17 You can use this code to Website > Website Tools > Custom CSS (if you need to resize text, I will give another code) @media screen and (max-width:640px) { body#collection-648fd387518f87218ded629c section.Intro figure 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
Rmarkjr Posted February 18 Author Share Posted February 18 Thank you! I see that you used the collection id from the site... having a hard time how you found the section.Intro figure img part. But anyhow, yes, if there is a way to resize the font on mobile so that it actually fits better in there and also get rid of the long black dead space that is under the car with the text that would be great! The goal would be to have the car fit right with the text over the car and not almost each word on a sperate line. Hopefuly then part of the website text shown under that, starting with the What Does A Ceramic Coating Do? Also, if someone wanted to zoom in on the car and make that fill the screen left to right just a bit more... how would you do that? Thank you again! Link to comment
tuanphan Posted February 20 Share Posted February 20 If you want to apply to other pages, no need to find collection id, just edit that page > Add a Code Block on bottom of site > paste this code <style> @media screen and (max-width:640px) { section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; } } </style> If apply to that page only, use this new code to Custom CSS @media screen and (max-width:640px) { body#collection-648fd387518f87218ded629c { section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; } section.Intro.Intro--has-image h1 { font-size: 20px !important; position: relative; top: -50px; } section.Intro.Intro--has-image { min-height: unset !important; height: 200px !important; }}} If apply to other pages, use this code to Code Block <style> @media screen and (max-width:640px) { section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; } section.Intro.Intro--has-image h1 { font-size: 20px !important; position: relative; top: -50px; } section.Intro.Intro--has-image { min-height: unset !important; height: 200px !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
Rmarkjr Posted February 29 Author Share Posted February 29 Hey! I just applied this to all my pages that I needed with the code box you said to do <style> @media screen and (max-width:640px) { section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; } section.Intro.Intro--has-image h1 { font-size: 25px !important; position: relative; top: -100px; } section.Intro.Intro--has-image { min-height: unset !important; height: 200px !important; }} </style> I got to say thank you! It worked beautifully. All my pages and city pages look sooo much better. I did change the top value to -100 to center it more and the font size up a bit. Man, I can't believe it finally looks good. Thank you! This helps me out a ton. Out of curiosity, using that same code above for each page. Is there a way to say "zoom in" on the background image? like the car, if I wanted to make that appear a bit bigger, to remove some of the black space on the left and right of the car, without changing the position of it, is there an added code that can do that? Link to comment
Solution tuanphan Posted March 2 Solution Share Posted March 2 You can add transform: scale(1.5); to this code section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; transform: scale(1.5); } 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
Rmarkjr Posted March 3 Author Share Posted March 3 19 hours ago, tuanphan said: You can add transform: scale(1.5); to this code section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; transform: scale(1.5); } Thats awesome. Thank you again! That was exactly what I was looking for! tuanphan 1 Link to comment
randm Posted August 22 Share Posted August 22 Hi, I was just wondering if anyone can help. I want to scale all of my images and text on the mobile and tablet by 120%, as they appear too small. They are all using/within simple list. When I have tried to do this it creates a need to scroll left and right because it becomes too wide for the mobile viewport. I tried to use 'html, body {overflow-x: hidden;}' to counter it but that then cut off my images on the right instead of them being centred. Many thanks for any help with this. Link to comment
tuanphan Posted August 24 Share Posted August 24 On 8/22/2024 at 6:03 PM, randm said: Hi, I was just wondering if anyone can help. I want to scale all of my images and text on the mobile and tablet by 120%, as they appear too small. They are all using/within simple list. When I have tried to do this it creates a need to scroll left and right because it becomes too wide for the mobile viewport. I tried to use 'html, body {overflow-x: hidden;}' to counter it but that then cut off my images on the right instead of them being centred. Many thanks for any help with this. Can you share link to site? 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
randm Posted August 28 Share Posted August 28 many thanks, i've messaged you with the url 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