Side by side images in mobile/side by side image & text in mobile

Site URL: https://soybean-fox-s3cf.squarespace.com/gear

Hi! I'm building my first website with squarespace (still in the trial period) and I'm running into some hiccups with the mobile view. I have everything set how I'd like in desktop view, but when I  switch to mobile, these 4 icons are stacked rather than side by side.

Similarly, I have some images (links) that are next to text on my desktop view, but are not when I switch to mobile. I have this same issue on multiple sections on the same page. Any help would be appreciated. I've included the URL, but don't know if it will work since I'm still in the trial period. I'm new to code, but did get the chrome plugin that allows me to conveniently see the id #'s and such. Thanks in advance for any help!

Hi,

Your site is private. You should setup password & share url again/ We can help easier

9 hours ago, tuanphan said:

Hi,

Your site is private. You should setup password & share url again/ We can help easier

My apologies. Here's the URL https://soybean-fox-s3cf.squarespace.com/gear  and password - 2378

Thank you so much for your help, I really appreciate it!

Jimmy

On 10/26/2021 at 2:24 AM, JimmyBre said:

My apologies. Here's the URL https://soybean-fox-s3cf.squarespace.com/gear  and password - 2378

 

Thank you so much for your help, I really appreciate it!

Jimmy

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-4 {
    width: 60% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-1 {
    width: 40% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-1 .image-block {
    width: 60%;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-1 .image-block {}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 .span-1 {
    width: 40% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 .span-4 {
    width: 60% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 {
    clear: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 .span-1 .image-block {
    width: 60%;
}
}

8 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-4 {
    width: 60% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-1 {
    width: 40% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-1 .image-block {
    width: 60%;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row>.span-1 .image-block {}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 .span-1 {
    width: 40% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 .span-4 {
    width: 60% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 {
    clear: left !important;
}
div#block-yui_3_17_2_1_1634608700663_59713+.row .span-7 .span-1 .image-block {
    width: 60%;
}
}

 

Thank you so much for your help, I really appreciate it! For the other sections, can I just copy that code and switch out the block id? Also wondering how to get those four icons side by side rather than on top of each other in mobile view? Again, thank you so much, sorry to be a bother.

On 10/28/2021 at 5:12 AM, JimmyBre said:

Thank you so much for your help, I really appreciate it! For the other sections, can I just copy that code and switch out the block id? Also wondering how to get those four icons side by side rather than on top of each other in mobile view? Again, thank you so much, sorry to be a bother.

Each section will need a different code. You can share link to all pages where you have problem, we will give the code

With Home away home 4 icons, add this CSS

/* Mobile Home away home 4 icons */
@media screen and (max-width:767px) {
div#page-section-616dc76d90f7e9440b42880a .span-12>.row:nth-child(1) {
&>.span-1 {
    width: 25% !important;
    float: left !important;
}
&>.span-7 {
    width: 75% !important;
    float: left !important;
}
&>.span-7>.row>.span-1 {
    width: 33.3333% !important;
    float: left !important;
}
&>.span-7>.row>.span-2 {
    width: 66.6667% !important;
    float: left !important;
}
&>.span-7>.row>.span-2 .span-1 {
    width: 50% !important;
    float: left !important;
}
.image-block {
    width: 90% !important;
    padding: 0 !important;
}
}
}

On 10/30/2021 at 7:26 PM, tuanphan said:

Each section will need a different code. You can share link to all pages where you have problem, we will give the code

With Home away home 4 icons, add this CSS

/* Mobile Home away home 4 icons */
@media screen and (max-width:767px) {
div#page-section-616dc76d90f7e9440b42880a .span-12>.row:nth-child(1) {
&>.span-1 {
    width: 25% !important;
    float: left !important;
}
&>.span-7 {
    width: 75% !important;
    float: left !important;
}
&>.span-7>.row>.span-1 {
    width: 33.3333% !important;
    float: left !important;
}
&>.span-7>.row>.span-2 {
    width: 66.6667% !important;
    float: left !important;
}
&>.span-7>.row>.span-2 .span-1 {
    width: 50% !important;
    float: left !important;
}
.image-block {
    width: 90% !important;
    padding: 0 !important;
}
}
}

 

You have been such a great help, thank you so much! I definitely have a new appreciation for code. Most of the other sections that I need help with are on the same page as the section you've helped me out with already https://soybean-fox-s3cf.squarespace.com/gear  I need the same help with the sections titled "All within a backpack", "Camera, Photo/Video Gear" and "Seasonal/Special use items". All of these sections need the 4 top icons side by side in mobile as well as the gear icons next to the text like you've helped me with in the "Home away from home" section. And the very top section on the page has the 4 icons I need side by side as well. The only other page on the website that I need help with is https://soybean-fox-s3cf.squarespace.com/species  I have these 8 icons i'd like as 2 rows of 4 in mobile view if possible.

I understand I'm asking for a lot of help, I cannot express my appreciation for you taking the time to help me!

On 11/1/2021 at 9:33 AM, JimmyBre said:

You have been such a great help, thank you so much! I definitely have a new appreciation for code. Most of the other sections that I need help with are on the same page as the section you've helped me out with already https://soybean-fox-s3cf.squarespace.com/gear  I need the same help with the sections titled "All within a backpack", "Camera, Photo/Video Gear" and "Seasonal/Special use items". All of these sections need the 4 top icons side by side in mobile as well as the gear icons next to the text like you've helped me with in the "Home away from home" section. And the very top section on the page has the 4 icons I need side by side as well. The only other page on the website that I need help with is https://soybean-fox-s3cf.squarespace.com/species  I have these 8 icons i'd like as 2 rows of 4 in mobile view if possible.

 

 

I understand I'm asking for a lot of help, I cannot express my appreciation for you taking the time to help me!

They will need to time to check.I will check gradually. Or I'll find a more optimal way to not use a lot of code.

Add to Design > Custom CSS

/* Gear - Species mobile */
@media screen and (max-width:767px) {
/* gear */
/* photography backaping */
div#page-section-616641982f9cdd2de0c3dffb>.row:nth-child(1) {
&>.col:nth-child(-n+4) {
    width: 50% !important;
    float: left !important;
}
&>.col:nth-child(2n+1) {
    clear: left;
}
.image-block {
    width: 90%;
    padding: 0;
}}
/* all within */
div#block-yui_3_17_2_1_1634608700663_40135+.row .span-4, div#block-yui_3_17_2_1_1634608700663_40135+.row .span-1 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_40135+.row .span-2 {
    clear: left;
}
div#block-yui_3_17_2_1_1634608700663_40135+.row .image-block {
    width: 75%;
    padding: 0;
}
}

10 hours ago, tuanphan said:

They will need to time to check.I will check gradually. Or I'll find a more optimal way to not use a lot of code.

Add to Design > Custom CSS

/* Gear - Species mobile */
@media screen and (max-width:767px) {
/* gear */
/* photography backaping */
div#page-section-616641982f9cdd2de0c3dffb>.row:nth-child(1) {
&>.col:nth-child(-n+4) {
    width: 50% !important;
    float: left !important;
}
&>.col:nth-child(2n+1) {
    clear: left;
}
.image-block {
    width: 90%;
    padding: 0;
}}
/* all within */
div#block-yui_3_17_2_1_1634608700663_40135+.row .span-4, div#block-yui_3_17_2_1_1634608700663_40135+.row .span-1 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634608700663_40135+.row .span-2 {
    clear: left;
}
div#block-yui_3_17_2_1_1634608700663_40135+.row .image-block {
    width: 75%;
    padding: 0;
}
}

 

That'd be fantastic, thanks again so much for all of your help!

@tuanphan I don't suppose you can help me too can you? I've tried the above code with my own blocks and I can't get it to work. Possibly because it's on a products page?

This is the page in question - https://www.snaplighting.com.au/lighting

I want the 4 icons at the top to be side by side with the text when in mobile mode. So icons down one side, text next to each one. Something like this in mobile.

Thank you!

On 10/18/2023 at 9:48 AM, q6products said:

@tuanphan I don't suppose you can help me too can you? I've tried the above code with my own blocks and I can't get it to work. Possibly because it's on a products page?

This is the page in question - https://www.snaplighting.com.au/lighting

I want the 4 icons at the top to be side by side with the text when in mobile mode. So icons down one side, text next to each one. Something like this in mobile.

Thank you!

Use this code to Website Tools (under Not Linked) > Custom CSS

/* Icons text side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1534826908466_11714+.row .span-6 .span-1 {
    width: 33.333% !important;
    float: left !important;
}}

Thanks so much @tuanphan ! But unfortunately this is happening when I try it - 

On 10/22/2023 at 11:34 AM, q6products said:

Thanks so much @tuanphan ! But unfortunately this is happening when I try it - 

I just tested on my Samsung mobile, it is fine

5 minutes ago, tuanphan said:

I just tested on my Samsung mobile, it is fine

I had to change the 33.333% to 21% for it to look like that. But the icons are a bit small. Anything above 21% causes the problem. Any idea why?

On 10/24/2023 at 10:17 AM, q6products said:

I had to change the 33.333% to 21% for it to look like that. But the icons are a bit small. Anything above 21% causes the problem. Any idea why?

Can you keep 33.333%? We can check it easier

3 minutes ago, tuanphan said:

Can you keep 33.333%? We can check it easier

Ok. It is back to 33.333%. Thanks

On 10/27/2023 at 8:44 AM, q6products said:

Ok. It is back to 33.333%. Thanks

Hi,

I see you figured it out? It is fine on my phone now