tuanphan Posted February 9, 2021 Share Posted February 9, 2021 17 hours ago, MichaelCaz said: Updated -- this code seemed to work, but I'm having the same issue with a photo lower in the page /* Tablet */ @media screen and (max-width:991px) { body.homepage #page section:first-child { min-height: 40vh !important; } } /* mobile */ @media screen and (max-width:767px) { body.homepage #page section:first-child { min-height: 20vh !important; } } Add to Design > Custom CSS /* resize second image */ @media screen and (max-width:767px) { [data-section-id="5fac1e6282b16a4c5a40d048"] { min-height: 20vh !important; height: 30vh; } } 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
MichaelCaz Posted February 9, 2021 Share Posted February 9, 2021 That worked beautifully! Thank you so much. Link to comment
MichaelCaz Posted February 12, 2021 Share Posted February 12, 2021 On 2/9/2021 at 7:11 AM, tuanphan said: Add to Design > Custom CSS /* resize second image */ @media screen and (max-width:767px) { [data-section-id="5fac1e6282b16a4c5a40d048"] { min-height: 20vh !important; height: 30vh; } } So, this worked, but then the main hero image was getting cutoff (the woman's head was getting cut off), so I fixed it on desktop and then mobile reverted back to the issue I was previously having. Do you have a solution that keeps the desktop photo as is and then fixes the cropping issue on mobile? Site: parkwoodproper.com password: treva Link to comment
tuanphan Posted February 15, 2021 Share Posted February 15, 2021 On 2/12/2021 at 11:50 PM, MichaelCaz said: So, this worked, but then the main hero image was getting cutoff (the woman's head was getting cut off), so I fixed it on desktop and then mobile reverted back to the issue I was previously having. Do you have a solution that keeps the desktop photo as is and then fixes the cropping issue on mobile? Site: parkwoodproper.com password: treva Use this new code /* resize second image */ @media screen and (max-width:767px) { [data-section-id="5fac21e85cfd473088cd75d7"] { min-height: 20vh !important; height: 50vh; } } 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 February 15, 2021 Share Posted February 15, 2021 On 2/14/2021 at 5:32 PM, philfv said: Hey @tuanphan thank you for your help everytime. I have another Question, i would like to change 3 or 4 other sites like the homepage with the logo symbols. I used the code from you again and took the new block id and it works but not all of the buttons like the attached pic why are four of them in the right size an the other two not? Whats the problem? i dont get it. Thank you! The website: https://www.finanzenverstehen.at/steuern i used this code: /* 2 images/row */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1613296461487_34577+.row>.span-2:nth-child(n+2)>div { width: 50%; float: left !important; padding: 0 !important; clear: none; } div#block-yui_3_17_2_1_1613296461487_34577+.row>.span-2:nth-child(n+2)>div:nth-child(3n+1) { clear: left !important; } } It looks fine here? Also, the page on mobile very long. You should consider adding a back to top button. 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 February 17, 2021 Share Posted February 17, 2021 On 2/15/2021 at 3:34 PM, tuanphan said: It looks fine here? Also, the page on mobile very long. You should consider adding a back to top button. Yes, i got it on my own, this Time. 🙂 thank you, but now i have a question again. I normally used 6 symbols, now i use 9 symbols and the structure isn good, like the attached pic. I try it again, maybe it works again, but can you look whats the problem with the Code? Only on mobile display. Site: https://www.finanzenverstehen.at/assetklassen-1 Thank you! Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 On 2/17/2021 at 6:09 PM, philfv said: Yes, i got it on my own, this Time. 🙂 thank you, but now i have a question again. I normally used 6 symbols, now i use 9 symbols and the structure isn good, like the attached pic. I try it again, maybe it works again, but can you look whats the problem with the Code? Only on mobile display. Site: https://www.finanzenverstehen.at/assetklassen-1 Thank you! Your layout can't change to 2 items/row. If you want 3 items/row, we can give the code 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 February 19, 2021 Share Posted February 19, 2021 8 hours ago, tuanphan said: Your layout can't change to 2 items/row. If you want 3 items/row, we can give the code Okey, yes than 3 items/row if possible. thank you again! Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 On 2/19/2021 at 5:30 PM, philfv said: Okey, yes than 3 items/row if possible. thank you again! Remove this code @media screen and (max-width: 767px) { div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2:nth-child(n+2)>div { width:50%; float: left !important; padding: 0 !important; clear: none } div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2:nth-child(n+2)>div:nth-child(3n+1) { clear: left !important } } Add new code /* 3 images side by side */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2>.image-block { width: 33.33% !important; float: left !important; clear: none !important; } div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2>.image-block { width: 33.33% !important; float: left !important; clear: none !important; padding: 0 !important; } div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2:after { content: ""; clear: both; display: table; } } 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
Oliver_H Posted April 20, 2021 Share Posted April 20, 2021 Hi! Also trying to make an image smaller on just mobile. This is my site:http://dram.app Password: iloveBeer22! Any help would be greatly appreciated 🙂 Link to comment
tuanphan Posted April 21, 2021 Share Posted April 21, 2021 18 hours ago, Oliver_H said: Hi! Also trying to make an image smaller on just mobile. This is my site:http://dram.app Password: iloveBeer22! Any help would be greatly appreciated 🙂 Add to Design > Custom CSS /* resize footer logo */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1618943747766_7494 { width: 30%; } } 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
HyperX Posted August 6, 2021 Share Posted August 6, 2021 On 7/8/2020 at 3:38 AM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:640px) { img.Mobile-bar-branding-logo { width: 200px; } } Hello, I would like the icons on the home page of my website be stacked in twos or threes in mobile view https://rovr.systems Please help if possible Desktop View Mobile View Link to comment
tuanphan Posted August 8, 2021 Share Posted August 8, 2021 On 8/6/2021 at 11:11 PM, HyperX said: Hello, I would like the icons on the home page of my website be stacked in twos or threes in mobile view https://rovr.systems Please help if possible Desktop View Mobile View Hi. Add to Design > Custom CSS /* Mobile icons 2 columns */ @media screen and (max-width:640px) { div#block-372732c6731967715c0d~.row>.span-2 { width: 50% !important; float: left !important; } div#block-372732c6731967715c0d~.row>.span-2:nth-child(2n+1) { clear: left !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
goodformvintage Posted August 19, 2021 Share Posted August 19, 2021 On 11/15/2019 at 3:19 PM, lu.diehl said: Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below: /* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed. Hi, this is exactly what I needed but now my logo is to the left and I need it centered. What can I add to this CSS code to center on mobile? Link to comment
tuanphan Posted August 22, 2021 Share Posted August 22, 2021 On 8/20/2021 at 2:00 AM, goodformvintage said: Hi, this is exactly what I needed but now my logo is to the left and I need it centered. What can I add to this CSS code to center on mobile? Hi, What is your site url? 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
sarahjo Posted January 24, 2022 Share Posted January 24, 2022 Hey! I'd like to display the photo of me on my about page smaller on mobile. Right now, the image takes the full width and also with the custom css code it doesn't work. How can I fix this? Link to the page is https://www.sarahkoester.com/about Link to comment
tuanphan Posted January 24, 2022 Share Posted January 24, 2022 8 minutes ago, sarahjo said: Hey! I'd like to display the photo of me on my about page smaller on mobile. Right now, the image takes the full width and also with the custom css code it doesn't work. How can I fix this? Link to the page is https://www.sarahkoester.com/about Add to Design > Custom CSS /* Mobile About image */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1612187394411_15061 { width: 50% !important; margin: 0 auto; } } 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
sarahjo Posted January 24, 2022 Share Posted January 24, 2022 39 minutes ago, tuanphan said: Add to Design > Custom CSS /* Mobile About image */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1612187394411_15061 { width: 50% !important; margin: 0 auto; } } Thank you, that worked! 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