Jump to content

7.1 Mobile Image Blocks Side-By-Side

Recommended Posts

Site URL: http://mergebusiness.co

I've spent too many hours trying to figure out how to make two specific, simple images appear side by side on mobile instead of stack vertically. I've tried countless codes and read through a dozen forum threads but can't seem to figure it out.

They are the Facebook and Instagram images on bottom. Site is under heavy construction, especially on mobile.

mergebusiness.co, password: thug (don't ask)

Thank you in advance! 

Edited by niccosays
Link to comment
  • Replies 11
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

On 8/20/2021 at 3:51 AM, niccosays said:

Site URL: http://mergebusiness.co

I've spent too many hours trying to figure out how to make two specific, simple images appear side by side on mobile instead of stack vertically. I've tried countless codes and read through a dozen forum threads but can't seem to figure it out.

They are the Facebook and Instagram images on bottom. Site is under heavy construction, especially on mobile.

mergebusiness.co, password: thug (don't ask)

Thank you in advance! 

Add to Design > Custom CSS

/* Footer icons side by side */
@media screen and (max-width:767px) {
div#page-section-607663787647a13eb452193b .span-1 {
    width: 50% !important;
    float: left !important;
}
div#page-section-607663787647a13eb452193b .span-1 .image-block {
    width: 60% !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
20 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Footer icons side by side */
@media screen and (max-width:767px) {
div#page-section-607663787647a13eb452193b .span-1 {
    width: 50% !important;
    float: left !important;
}
div#page-section-607663787647a13eb452193b .span-1 .image-block {
    width: 60% !important;
}
}

 

Thanks! Such a relief, you have no idea.

Does each website need a specific/unique code for this? Not sure why this one was so complicated.

One thing: the images end up being too big side by side using this code.  Any way I can resize them? Also, center them?

Your help is golden.

Edited by niccosays
Link to comment

I seem to have resolved it; here is the adjusted code I used to customize the placement of each item:

@media screen and (max-width:767px) {
  div#page-section-607663787647a13eb452193b .span-1 {
    width: 50% !important;
    float: left !important;
}
  
div#page-section-607663787647a13eb452193b .span-1 .image-block {
    width: 35% !important;
  }
  
#block-yui_3_17_2_1_1618506847935_25307 { margin-left: auto !important;
  margin-right: 6px !important;
  }
  
#block-yui_3_17_2_1_1618506847935_26763 { margin-right: auto !important;
  margin-left: -4px !important;
}
}

Thanks again! If there's a simpler code, please let me know.

Link to comment
5 hours ago, niccosays said:

Thanks! Such a relief, you have no idea.

Does each website need a specific/unique code for this? Not sure why this one was so complicated.

One thing: the images end up being too big side by side using this code.  Any way I can resize them? Also, center them?

Your help is golden.

You can adjust 60%

 

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
  • 3 months later...
On 12/13/2021 at 9:01 PM, abeonboard said:

I have this same question! @tuanphan

How can I make two image blocks appear side by side on mobile?

Website link: https://zarahemla.squarespace.com/
Section 4: Zarahemla in the news

Screenshot 2021-12-13 at 15.49.38.png

Add to Design > Custom CSS

/* Mobile-Zarahemla in the news */
@media screen and (max-width:767px) {
div#block-61b7409f04b54a0830078150+.row>.col:nth-child(-n+2) {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding: 0 !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
On 12/15/2021 at 2:20 AM, harleyjennings said:

I have the same question @tuanphan. I'm trying to get 4 image blocks to show 2 side by side in mobile view. My site is password protected at the moment while I'm editing. Would you be able to help, what would you need from me? Total beginner here :) 

You can share site url + access password. We can help easier

On 12/15/2021 at 6:33 PM, abeonboard said:

Thank you so much! @tuanphan That absolutely worked! I just wish I could make that on my own the next time but you seem to a wizard with (>.colum.row + & - 2nd child) code stuff. Do you know of any website that teaches looking into these elemnts?

Screenshot 2021-12-15 at 13.34.05.png

You need to learn HTML/CSS to solve these problems.

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
  • 4 months later...
On 5/11/2022 at 5:11 PM, vin0087 said:

Hi, I have same question, I tried copying your codes from above but it doesnt seem to work!

 

The website in question is as below:

 

https://bison-pomegranate-rbe9.squarespace.com/config/design/custom-css

 

Many thanks!

Hi,

What is access password?

And which page are you referring to?

https://bison-pomegranate-rbe9.squarespace.com/?noredirect

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

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.