keon Posted March 9, 2020 Share Posted March 9, 2020 Site URL: https://sprout-tuna-swnf.squarespace.com/ Halfway down my homepage there are 4 image cards, each with a title, displaying in two columns. However, when this switches to one column on mobile, the image takes up the full width of the screen and the title sits underneath it. How would I be able to have the title sit next to the image in the same column? This would look much tider. Like this: instead of how it actually looks on mobile: Any help would be much appreciated! Link to comment
tuanphan Posted March 10, 2020 Share Posted March 10, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1581330880897_19993+.row .image-block-v2 { display: flex; } div#block-yui_3_17_2_1_1581330880897_19993+.row .image-block-v2 .intrinsic { width: 40%; } div#block-yui_3_17_2_1_1581330880897_19993+.row .image-block-v2 .image-card-wrapper { width: 60%; } } 19blue 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
19blue Posted February 10, 2021 Share Posted February 10, 2021 Hi, I'm experiencing the same issue with this site: https://www.mgadv.no/kontakt Any help would be much appreciated. Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/10/2021 at 8:27 PM, 19blue said: Hi, I'm experiencing the same issue with this site: https://www.mgadv.no/kontakt Any help would be much appreciated. Add to Design > Custom CSS /* kontakt icon text side by side */ @media screen and (max-width:767px) { div#page-section-601c878e78a1067166d81580 .span-12>div:nth-child(n+3) figure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } 19blue 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
19blue Posted April 21, 2021 Share Posted April 21, 2021 On 2/14/2021 at 3:29 AM, tuanphan said: Add to Design > Custom CSS /* kontakt icon text side by side */ @media screen and (max-width:767px) { div#page-section-601c878e78a1067166d81580 .span-12>div:nth-child(n+3) figure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } Hi again @tuanphan I´ve made some updates to the website and somehow the vertical text/image alignment is off. Would you know how to fix this? It was originally center aligned vertically, and not so far away from the circle. Thank you. Link to comment
tuanphan Posted April 22, 2021 Share Posted April 22, 2021 3 hours ago, 19blue said: Hi again @tuanphan I´ve made some updates to the website and somehow the vertical text/image alignment is off. Would you know how to fix this? It was originally center aligned vertically, and not so far away from the circle. Thank you. Can you add the code & Don't edit anything? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
19blue Posted April 22, 2021 Share Posted April 22, 2021 21 hours ago, tuanphan said: Can you add the code & Don't edit anything? Didn't seem to do the trick... Link to comment
tuanphan Posted April 24, 2021 Share Posted April 24, 2021 On 4/23/2021 at 6:51 AM, 19blue said: Didn't seem to do the trick... It see it seems fine here? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
19blue Posted April 25, 2021 Share Posted April 25, 2021 On 4/24/2021 at 3:31 PM, tuanphan said: It see it seems fine here? The tekst was previously aligned to the vertical center of each cirlces. now they have dropped down. Link to comment
dreyahbohlen Posted August 7, 2021 Share Posted August 7, 2021 I'm also having this issue and the codes aren't working for me...has anyone solved this? The website is inteliqore.squarespace.com and the password is "p@ssword". www.dreyahbohlen.comInstagram | Facebook | TikTokBuy Me A Coffee Link to comment
tuanphan Posted August 8, 2021 Share Posted August 8, 2021 On 8/7/2021 at 7:41 AM, dreyahb said: I'm also having this issue and the codes aren't working for me...has anyone solved this? The website is inteliqore.squarespace.com and the password is "p@ssword". Hi. You want to make them to 2 columns on mobile?? dreyahbohlen 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dreyahbohlen Posted August 12, 2021 Share Posted August 12, 2021 Yes! I am wanting it to look like this. www.dreyahbohlen.comInstagram | Facebook | TikTokBuy Me A Coffee Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 On 8/12/2021 at 9:36 AM, dreyahb said: Yes! I am wanting it to look like this. Add to Design > Custom CSS /* Mobile icons */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1626657499507_12309+.row { .intrinsic { transform: unset !important; margin: unset !important; float: left !important; } figcaption.image-card-wrapper { float: left !important; width: calc(~"70% - 20px"); margin-left: 20px; }} } dreyahbohlen 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dreyahbohlen Posted August 15, 2021 Share Posted August 15, 2021 It worked!!! Thank you so much!!! www.dreyahbohlen.comInstagram | Facebook | TikTokBuy Me A Coffee Link to comment
dreyahbohlen Posted August 25, 2021 Share Posted August 25, 2021 Hi Tuanphan, The code above isn't working on my site anymore. Would you be able to check it out and see what how I'm interfering with it? Thank you so much!!! www.dreyahbohlen.comInstagram | Facebook | TikTokBuy Me A Coffee Link to comment
tuanphan Posted August 27, 2021 Share Posted August 27, 2021 On 8/26/2021 at 12:31 AM, dreyahb said: Hi Tuanphan, The code above isn't working on my site anymore. Would you be able to check it out and see what how I'm interfering with it? Thank you so much!!! Just answered your message. You can check again. If it works, you can share for other members. Thank you! Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
benja Posted December 21, 2021 Share Posted December 21, 2021 Hey @tuanphan Would you mind helping me out with my website?https://oleander-chicory-9t2h.squarespace.com/ (password is: umoweb) I have 16 heads on the homepage and would like to have 2 heads side by side on the mobile version. Is this possible? Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/21/2021 at 10:45 PM, benja said: Hey @tuanphan Would you mind helping me out with my website?https://oleander-chicory-9t2h.squarespace.com/ (password is: umoweb) I have 16 heads on the homepage and would like to have 2 heads side by side on the mobile version. Is this possible? Hi. Add to Design > Custom CSS /* Mobile homepage 16 heads */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1638192805985_20063~.row .span-3 { width: 50% !important; float: left !important; } div#block-yui_3_17_2_1_1638192805985_20063~.row .span-3:nth-child(2n+1) { clear: left !important; } } benja 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
benja Posted December 27, 2021 Share Posted December 27, 2021 @tuanphan awesome! thank you so much! 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