Side-By-Side Images on Mobile

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!

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!

What is your site wide password

Apologies!

PW: london88

thank you

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

That's got it!

Amazing - thanks so much 😃

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

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

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

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

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

4. (Mobile) Similar on Eyebrow

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

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?