majamalmcrona Posted February 2, 2021 Share Posted February 2, 2021 Site URL: http://www.majamalmcrona.com/ Hey guys! My website majamalmcrona.com has a row of three images displayed on the front page (image blocks). On the mobile version, it currently shows up as only one row of image. I would like the mobile version to have two rows of images. Anyone know how to go about this? I've seen the code below been shared a few times with regards to this, but to me it doesn't seem to work... @media screen and (max-width:767px) { div#page-section-5eae050ded72103d3af701d9>.row>.col { width: 50% !important; float: left !important; } } Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 Hi. Do you still need help on this? And which plan do you use? Personal or Business Plan? 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
majamalmcrona Posted February 6, 2021 Author Share Posted February 6, 2021 Hi tuanphan, yes, please, I do! I use a Personal plan. Link to comment
tuanphan Posted February 7, 2021 Share Posted February 7, 2021 On 2/6/2021 at 5:50 PM, majamalmcrona said: Hi tuanphan, yes, please, I do! I use a Personal plan. Add to Design > Custom CSS /* 2 images mobile */ @media screen and (max-width:767px) { div#page-5ebd4058035b3a35aa4a5992 .image-block { width: 50%; float: left !important; clear: none !important; padding-left: 0 !important; padding-right: 0 !important; } div#page-5ebd4058035b3a35aa4a5992 .image-block:nth-child(2n+1) { clear: left !important; } } majamalmcrona 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
majamalmcrona Posted February 8, 2021 Author Share Posted February 8, 2021 You are amazing, this works! Thank you so much! One small tweak. The images seem to have moved slightly both horizontally and vertically, not sure why this is the case. They should have a small gap between them (similar to the desktop version). See image for what I mean...any clue why this is the case? Link to comment
AnaCalheiros Posted February 11, 2021 Share Posted February 11, 2021 Hello, I've the same problem. Is it possible to make my summary page show 2 image per row on mobile? I tried that code but it doesn't seem to work. Here's the url https://www.porventura.pt/en/all-collection Also, do you know if it's possible to have those images changing to a secondary image on mouse hover? thank you very much, Ana Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/8/2021 at 1:20 PM, majamalmcrona said: You are amazing, this works! Thank you so much! One small tweak. The images seem to have moved slightly both horizontally and vertically, not sure why this is the case. They should have a small gap between them (similar to the desktop version). See image for what I mean...any clue why this is the case? Do you still need help? On 2/12/2021 at 5:38 AM, AnaCalheiros said: Hello, I've the same problem. Is it possible to make my summary page show 2 image per row on mobile? I tried that code but it doesn't seem to work. Here's the url https://www.porventura.pt/en/all-collection Also, do you know if it's possible to have those images changing to a secondary image on mouse hover? thank you very much, Ana Q1. Add to Design > Custom CSS /* products 2 columns mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1573716009710_3722 .summary-item-list { display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 10px; } } Q2. Use this plugin. AnaCalheiros 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
majamalmcrona Posted February 15, 2021 Author Share Posted February 15, 2021 22 hours ago, tuanphan said: Do you still need help? Yes, please! Link to comment
tuanphan Posted February 17, 2021 Share Posted February 17, 2021 On 2/15/2021 at 5:17 PM, majamalmcrona said: Yes, please! Find this code div#page-5ebd4058035b3a35aa4a5992 .image-block { width: 50%; float: left !important; clear: none !important; padding-left: 0 !important; padding-right: 0 !important; } change to this div#page-5ebd4058035b3a35aa4a5992 .image-block { width: 50%; float: left !important; clear: none !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; } 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
majamalmcrona Posted February 18, 2021 Author Share Posted February 18, 2021 Flawless! Thank you so, so much! Link to comment
Erlend-fs Posted February 18, 2021 Share Posted February 18, 2021 I have a similar issue. I want these images display in two columns on tablet and mobile. I´ve accomplished to get them onto two column with screen size between 768-980px by using the code below. But I don´t understand how to make them display in two column below 768px screen size. /* CSS code - two column between 768-980px*/ @media only screen and (min-width: 768px) and (max-width: 980px) { #collection-602cc9394fdf411229b86e4e .sqs-col-3 { width: 50%; display: inline-block; float: none; vertical-align: top } } /* End - CSS code*/ Site url: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau pw: hoyden2021 Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 15 hours ago, Erlend-fs said: I have a similar issue. I want these images display in two columns on tablet and mobile. I´ve accomplished to get them onto two column with screen size between 768-980px by using the code below. But I don´t understand how to make them display in two column below 768px screen size. /* CSS code - two column between 768-980px*/ @media only screen and (min-width: 768px) and (max-width: 980px) { #collection-602cc9394fdf411229b86e4e .sqs-col-3 { width: 50%; display: inline-block; float: none; vertical-align: top } } /* End - CSS code*/ Site url: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau pw: hoyden2021 edit 768px to 1px 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
Erlend-fs Posted February 19, 2021 Share Posted February 19, 2021 Thanks for your reply tuanphan. I've tried that, but everything below 768px gets wired... See attached screenshots. Link to comment
Erlend-fs Posted February 19, 2021 Share Posted February 19, 2021 I've made a copy of the page, to explore this issue (other people are reviewing the main page, so I won't mess it up) https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau-2 I think I almost found a solution now. The images scales down 50%. but won't display next to each other. I'm using the following code: --------------------------------- @media only screen and (min-width: 767px) and (max-width: 980px) { #collection-602f5b8a6452217c32690f5e .sqs-col-3 { width: 50%; display: inline-block; float: none; vertical-align: top } } @media only screen and (min-width: 300px) and (max-width: 767px) { #collection-602f5b8a6452217c32690f5e .sqs-block-content { width: 50%; display: inline-block; float: none; vertical-align: top; } } --------------------------- The first section of code are talking to four culumn blocks (sqs-col-3 ), right? Since Squarespace are scaling down to one column after 767px, I guess this code won't work below 767px..? Therefore, I tried to find another code that could talk to the layout below 767px. ".sqs-block-content" seems to work, but I do not know how to get the images to appear next to each other. If you have a solution to this, it would be great! Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 On 2/19/2021 at 2:13 PM, Erlend-fs said: I've made a copy of the page, to explore this issue (other people are reviewing the main page, so I won't mess it up) https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau-2 I think I almost found a solution now. The images scales down 50%. but won't display next to each other. I'm using the following code: --------------------------------- @media only screen and (min-width: 767px) and (max-width: 980px) { #collection-602f5b8a6452217c32690f5e .sqs-col-3 { width: 50%; display: inline-block; float: none; vertical-align: top } } @media only screen and (min-width: 300px) and (max-width: 767px) { #collection-602f5b8a6452217c32690f5e .sqs-block-content { width: 50%; display: inline-block; float: none; vertical-align: top; } } --------------------------- The first section of code are talking to four culumn blocks (sqs-col-3 ), right? Since Squarespace are scaling down to one column after 767px, I guess this code won't work below 767px..? Therefore, I tried to find another code that could talk to the layout below 767px. ".sqs-block-content" seems to work, but I do not know how to get the images to appear next to each other. If you have a solution to this, it would be great! Add to Design > Custom CSS > Then save & reload your site /* image side by side */ @media screen and (max-width:767px) { div#page-section-602f5b8a6452217c32690f60 .span-12 .span-3 { width: 50% !important; float: left !important; } div#page-section-602f5b8a6452217c32690f60 .span-3 .sqs-block-content { width: 100% !important; } div#page-section-602f5b8a6452217c32690f60 .span-3 * { font-size: 12px !important; } } 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
Erlend-fs Posted February 22, 2021 Share Posted February 22, 2021 (edited) This works perfectly! Thank you so much tuanphan! Now, I'm only having two issues with the text. I'm using the poster image block option (see screenshot 1). 1 - alignment I would like the text to be vertically aligned at the top (and not the center) of the images. I've tried to use vertical-align: top; in the css, but without luck. 2 - line height I'm struggling getting the line height small enough on screens below 1200px width. I´ve added custom css to make the font size scale in a good way to different screen sizes. In this code, I'm also controlling the line height, but around 1200px, the line height has reached 0px, but I would like it smaller. (see screenshot 2) - See attached screenshot 3 with a screen of 990px width (too much line height) It would be great if there is a solution to this! Site url: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau pw: hoyden2021 Edited February 22, 2021 by Erlend-fs 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