NOAHCRED Posted September 23 Share Posted September 23 Site URL: https://www.redroom-design.com/ I'm trying to add custom CSS to my site in order to change image sizes for mobile view only & am having trouble. I was wondering if I could receive some support on the most accessible ways to get this done. Link to comment
Lesum Posted September 23 Share Posted September 23 @NOAHCRED Hi! Which specific images are you trying to resize for the mobile view, and on which page? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
tuanphan Posted September 25 Share Posted September 25 I think it is top image on homepage. You can use this to Website Tools > Custom CSS @media screen and (max-width:767px) { div#block-70c10e36f21e7086407f img { object-fit: contain !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
NOAHCRED Posted September 26 Author Share Posted September 26 It's actually for a portfolio page I haven't made live yet. How do I find the specific block information for coding? Link to comment
tuanphan Posted September 28 Share Posted September 28 On 9/27/2024 at 12:08 AM, NOAHCRED said: It's actually for a portfolio page I haven't made live yet. How do I find the specific block information for coding? Follow 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
NOAHCRED Posted September 30 Author Share Posted September 30 Once you find the block ID, how do you adjust the code to apply to the entire portfolio of images for that section? I am able to adjust single images but not the entire scroll through. I appreciate all the help Link to comment
tuanphan Posted October 3 Share Posted October 3 On 9/30/2024 at 9:38 PM, NOAHCRED said: Once you find the block ID, how do you adjust the code to apply to the entire portfolio of images for that section? I am able to adjust single images but not the entire scroll through. I appreciate all the help You can replace ID in the code with Page ID When use tool, you will see an ID in the top of page, it is Page ID Or if you want to target images belong specific section only, use section[data-section-id="..."] (use the tool, you can see this ID) 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
NOAHCRED Posted October 3 Author Share Posted October 3 That doesn't seem to be working for me. I used the following code and the images in the gallery are still showing up as the same size: @media screen and (max-width:767px) { div#section-66e068e8c9e0ef3ef3553fde img { object-fit: contain !important; } Link to comment
tuanphan Posted October 6 Share Posted October 6 On 10/3/2024 at 10:05 PM, NOAHCRED said: That doesn't seem to be working for me. I used the following code and the images in the gallery are still showing up as the same size: @media screen and (max-width:767px) { div#section-66e068e8c9e0ef3ef3553fde img { object-fit: contain !important; } You need 2 symbols }} at the end 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