Jump to content

Side-By-Side Images on Mobile

Recommended Posts

Site URL: http://www.foxandvamp.squarespace.com

Hi All

On the home page of the website I'm currently working on, trying to have the two images on the attached screenshot to appear side-by-side - have tried a number of CSS options from other forum posts and replaced section id's for my particular case but having no luck at the minute.

There's a few similar I need to do across the website - if someone can please help with the CSS and which codes I need to be using, that'd be great!

 

Thanks in advance!

Screenshot 2021-04-07 at 22.29.30.png

Link to comment
  • Replies 9
  • Views 1.7k
  • Created
  • Last Reply
28 minutes ago, richardgreencreative said:

Site URL: http://www.foxandvamp.squarespace.com

Hi All

On the home page of the website I'm currently working on, trying to have the two images on the attached screenshot to appear side-by-side - have tried a number of CSS options from other forum posts and replaced section id's for my particular case but having no luck at the minute.

There's a few similar I need to do across the website - if someone can please help with the CSS and which codes I need to be using, that'd be great!

 

Thanks in advance!

Screenshot 2021-04-07 at 22.29.30.png

What is your site wide password

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
24 minutes ago, richardgreencreative said:

Apologies!

 

PW: london88

 

thank you

try

#block-yui_3_17_2_1_1617703934359_21106 + .row > .col {
  float: left !important;
  width: 50% !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 4/8/2021 at 5:53 AM, richardgreencreative said:

Tried the same code for a couple of blocks further down the same home page.

 

First two seem to be okay, but the second row not quite right... any help on this one too please?

 

thanks

Add to Design > Custom CSS

/* Cant decide 4 images */
@media screen and (max-width:767px) {
#block-8f0f1729810bd3d6e6ee+.row>.col {
    float: left !important;
    width: 50% !important;
}
#block-8f0f1729810bd3d6e6ee+.row>.col:nth-child(2n+1) {
    clear: left;
}
}

 

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 4/8/2021 at 5:53 AM, richardgreencreative said:

Tried the same code for a couple of blocks further down the same home page.

 

First two seem to be okay, but the second row not quite right... any help on this one too please?

 

thanks

Also, the site has some problems

Site URL: https://foxandvamp.squarespace.com/

1. (Tablet-Homepage) White bar on right of screen

foxandvamp.squarespace.com-tablet-homepa

2. (Tablet-Hair extensions) Increase boxes width?

foxandvamp.squarespace.com-tablet-hair-e

3. (Mobile-Lash Extensions) change order of some text/images on mobile?

foxandvamp.squarespace.com-mobile-lash-e

4. (Mobile) Similar on Eyebrow

foxandvamp.squarespace.com-mobile-min.pn

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

Hi @tuanphan

Thanks for the reply and the issues you've pointed out.

Please can I ask which tablet you're using for seeing these issues?

Now that there's no tablet preview within SS, I used an iPad Air for any tablet resizing and thought I'd resolved these last week - there must be something I'm still missing.

As far as the images/text rearranging, I'd made a forum post last week about these as the code wasn't working for me, I don't appear to have received a reply to that post and couldn't figure out the code to swap images so that they all followed order as below for each section.

1. Title

2. Image

3. Information

Appreciate your help.

Thanks

 

Link to comment
7 hours ago, richardgreencreative said:

Hi @tuanphan

Thanks for the reply and the issues you've pointed out.

Please can I ask which tablet you're using for seeing these issues?

Now that there's no tablet preview within SS, I used an iPad Air for any tablet resizing and thought I'd resolved these last week - there must be something I'm still missing.

As far as the images/text rearranging, I'd made a forum post last week about these as the code wasn't working for me, I don't appear to have received a reply to that post and couldn't figure out the code to swap images so that they all followed order as below for each section.

1. Title

2. Image

3. Information

Appreciate your help.

Thanks

 

I use iPad mode in Chrome Developer Tool

(You can right click on anywhere >> Click Inspect Element >> Select iPad on top of screen)

With Q3.

You mean order like this?

image.thumb.png.ed2783ad8f312fd7e5c188e9dff358ef.png

 

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

Archived

This topic is now archived and is closed to further replies.

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