NorthernGoose 0 Share Posted December 11, 2019 Hello Everyone, I have no real experience coding and I want to ensure the image seen on the desktop view is roughly the same size on mobile. How can I do this? Link to post
0 juliahodgins 0 Share Posted November 7, 2020 @tuanphan Hi Tuan, I was hoping you are also able to help me with resizing section media to mobile. I've tried inserting the codes you provided for others in this thread but doesn't seem to work. my website is www.roughandrose.co and its the "spotlight-post" section as pictured below. Thanks in advance! Julia Link to post
0 toniohb 1 Share Posted November 8, 2020 Thank you very much for your kind help @tuanphan ! Take care Link to post
0 juliahodgins 0 Share Posted November 9, 2020 On 11/8/2020 at 10:53 AM, juliahodgins said: @tuanphan Hi Tuan, I was hoping you are also able to help me with resizing section media to mobile. I've tried inserting the codes you provided for others in this thread but doesn't seem to work. my website is www.roughandrose.co and its the "spotlight-post" section as pictured below. Thanks in advance! Julia @tuanphan Hi Tuan was wondering if you are able to help with this? Much appreciated. Link to post
0 tuanphan 8,979 Share Posted November 9, 2020 54 minutes ago, juliahodgins said: @tuanphan Hi Tuan was wondering if you are able to help with this? Much appreciated. You can add 2 sections: I can give the code to hide 1 on desktop, hide 1 on mobile You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 juliahodgins 0 Share Posted November 9, 2020 6 minutes ago, tuanphan said: You can add 2 sections: I can give the code to hide 1 on desktop, hide 1 on mobile @tuanphan so duplicate the section and add unique CSS code to each section? yes please, if you can prepare the code that would be amazing thank you! Link to post
0 tuanphan 8,979 Share Posted November 9, 2020 4 hours ago, juliahodgins said: @tuanphan so duplicate the section and add unique CSS code to each section? yes please, if you can prepare the code that would be amazing thank you! You can sections first, I can't give code without checking section. You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 juliahodgins 0 Share Posted November 9, 2020 6 hours ago, tuanphan said: You can sections first, I can't give code without checking section. Thanks @tuanphan I've duplicated now 🙂 Link to post
0 tuanphan 8,979 Share Posted November 9, 2020 1 hour ago, juliahodgins said: Thanks @tuanphan I've duplicated now 🙂 top banner for mobile or desktop? You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 juliahodgins 0 Share Posted November 10, 2020 3 hours ago, tuanphan said: top banner for mobile or desktop? top banner for desktop and bottom banner for mobile, thank you! Link to post
0 tuanphan 8,979 Share Posted November 10, 2020 28 minutes ago, juliahodgins said: top banner for desktop and bottom banner for mobile, thank you! Add to Home > Design > Custom CSS /* Hide bottom banner on desktop */ @media screen and (min-width:641px) { section#spotlight-post-1 { display: none; } } /* Hide top banner on mobile */ @media screen and (max-width:640px) { section#spotlight-post { display: none; } } You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 juliahodgins 0 Share Posted November 10, 2020 14 minutes ago, tuanphan said: Add to Home > Design > Custom CSS /* Hide bottom banner on desktop */ @media screen and (min-width:641px) { section#spotlight-post-1 { display: none; } } /* Hide top banner on mobile */ @media screen and (max-width:640px) { section#spotlight-post { display: none; } } are you able to kindly include a coding for the bottom banner to show on tablet as well? THANK YOU! YOU ARE AMAZING! Link to post
0 tuanphan 8,979 Share Posted November 10, 2020 20 minutes ago, juliahodgins said: are you able to kindly include a coding for the bottom banner to show on tablet as well? THANK YOU! YOU ARE AMAZING! min-width: 641px = desktop + tablet You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 juliahodgins 0 Share Posted November 10, 2020 31 minutes ago, tuanphan said: min-width: 641px = desktop + tablet where do I out that in the code? Link to post
0 tuanphan 8,979 Share Posted November 11, 2020 On 11/10/2020 at 11:03 AM, juliahodgins said: where do I out that in the code? Try this /* Hide bottom banner on desktop */ @media screen and (min-width:901px) { section#spotlight-post-1 { display: none; } } /* Hide top banner on mobile */ @media screen and (max-width:900px) { section#spotlight-post { display: none; } } You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 juliahodgins 0 Share Posted November 13, 2020 On 11/11/2020 at 9:58 PM, tuanphan said: Try this /* Hide bottom banner on desktop */ @media screen and (min-width:901px) { section#spotlight-post-1 { display: none; } } /* Hide top banner on mobile */ @media screen and (max-width:900px) { section#spotlight-post { display: none; } } you are amazing, thank you so very much! Link to post
0 tuanphan 8,979 Share Posted November 20, 2020 On 11/13/2020 at 10:04 AM, juliahodgins said: you are amazing, thank you so very much! Hi. I see on tablet Buttons: More Info, Learn More not align. Do you want to fix this? You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Question
NorthernGoose 0
Hello Everyone,
I have no real experience coding and I want to ensure the image seen on the desktop view is roughly the same size on mobile. How can I do this?
Link to post
Top Posters For This Question
17
8
7
3
Popular Days
Dec 16
7
Nov 9
6
Nov 10
5
Dec 17
3
Top Posters For This Question
tuanphan 17 posts
juliahodgins 8 posts
McKenzieDesign 7 posts
ForwardMile 3 posts
Popular Days
Dec 16 2019
7 posts
Nov 9 2020
6 posts
Nov 10 2020
5 posts
Dec 17 2019
3 posts
Popular Posts
tuanphan
Remove above code, then add this to Home > Design > Custom CSS /* resize mobile home banner */ @media screen and (max-width:640px) { section#home figure img { width: 100% !important;
Posted Images
41 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment