Jump to content

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

Recommended Posts

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.

image.thumb.png.0c955d26464bdcdcf0336ada4eeef47c.pngimage.thumb.png.3bdd681c6f476ff4dbd8a522959e91a6.png

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!

 

image.thumb.png.12af11ea052f48d31178d2ef35c166c2.png

image.thumb.png.af9f1697e946215c04477a1c1e4caa4e.png

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

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%;
}
}

 

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
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.

image.thumb.png.3bdd681c6f476ff4dbd8a522959e91a6.png

Link to comment
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.

image.thumb.png.3bdd681c6f476ff4dbd8a522959e91a6.png

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;
}
}
}

 

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
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.

 

image.thumb.png.15ab5ccd7178b993eb346b7dddd3f7c3.png

 

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

Link to comment
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.

 

image.thumb.png.15ab5ccd7178b993eb346b7dddd3f7c3.png

 

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;
}
}

 

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
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.