Images side by side on mobile

tuanphan · June 14, 2021

On 6/13/2021 at 4:47 AM, s7udiostars said:

Hey Tuanphan. I have tried to add this, but it have not worked, can you maybe guide me? my website is https://www.s7udiostars.com/ 🙂

Hi. You mean 9 poster blocks on homepage? Make them 2 items/row on mobile?

s7udiostars · June 14, 2021

yes, that is what im loking for 🙂

tuanphan · June 15, 2021

22 hours ago, s7udiostars said:

yes, that is what im loking for 🙂

Add this to Settings > Advanced > Code Injection > Footer >> Then save & check on real mobile

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('div#page-section-6058d2ded607a06ccc5e14c8 .span-4:first-child').insertAfter('div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(3)');
}
});
</script>
<style>
  @media screen and (max-width:767px) {
  div#page-section-6058c92dd9372926209ce60b .span-4, div#page-section-605906607b4d59585583ac12 .span-4 {
  	width: 50% !important;
    float: left !important;
  }
    div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(2n+1) {
  	clear: left !important;
  }
  }
</style>

s7udiostars · June 15, 2021

5 hours ago, tuanphan said:

Add this to Settings > Advanced > Code Injection > Footer >> Then save & check on real mobile


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('div#page-section-6058d2ded607a06ccc5e14c8 .span-4:first-child').insertAfter('div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(3)');
}
});
</script>
<style>
  @media screen and (max-width:767px) {
  div#page-section-6058c92dd9372926209ce60b .span-4, div#page-section-605906607b4d59585583ac12 .span-4 {
  	width: 50% !important;
    float: left !important;
  }
    div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(2n+1) {
  	clear: left !important;
  }
  }
</style>

Thank you, it helped. but some of the pictures are not getting smaller / side by side. and the text is cramping up, is there are possiblity to get all of them small?
thank you so much!

tuanphan · June 16, 2021

19 hours ago, s7udiostars said:

Thank you, it helped. but some of the pictures are not getting smaller / side by side. and the text is cramping up, is there are possiblity to get all of them small?
thank you so much!

Don't remove any code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-6058d2ded607a06ccc5e14c8 .span-4 {
    width: 50% !important;
    float: left !important;
}
body.homepage .design-layout-poster * {
    font-size: 14px;
}
}

s7udiostars · June 16, 2021

1 hour ago, tuanphan said:

Don't remove any code. Add this to Design > Custom CSS


@media screen and (max-width:767px) {
div#page-section-6058d2ded607a06ccc5e14c8 .span-4 {
    width: 50% !important;
    float: left !important;
}
body.homepage .design-layout-poster * {
    font-size: 14px;
}
}

you are truly amazing! Thank you so much!

tuanphan · June 24, 2021

On 6/16/2021 at 5:24 PM, s7udiostars said:

you are truly amazing! Thank you so much!

Do you want fix these?

Site URL – https://www.s7udiostars.com/

1. (Mobile-Footer) Center all elements in footer?

2. (Tablet-Homepage) Reduce text size?

3. (Tablet-Header) Align social – menu?

4. (Mobile-Shop) Change category links to 2/3 lines, instead of scrollbar

5. (Mobile-Products) Change related products to 2 items/row?

6. (Mobile-Products) Change related products to 2 items/row?

Esoes_design · July 28, 2021

Hi @tuanphan

I have a similar problem with two images.

I would like to put the two images (in green) the same (side by side) in the mobile view.

Do you have a code for this ?

https://wisteria-pomegranate-drf5.squarespace.com

Pass : Esoes

Thanks for your precious help !!

tuanphan · July 29, 2021

20 hours ago, Esoes_design said:

Hi @tuanphan

I have a similar problem with two images.

I would like to put the two images (in green) the same (side by side) in the mobile view.

Do you have a code for this ?

https://wisteria-pomegranate-drf5.squarespace.com

Pass : Esoes

Thanks for your precious help !!

Add to Design > Custom CSS

/* Images side by side */
@media screen and (max-width:767px) {
div#page-section-60a1058008554025bfaa5109 .span-7 .span-5>.row:first-child {
    display: flex;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}
div#page-section-60a1058008554025bfaa5109 .span-7 .span-5>.row:first-child>.col {
    width: 50% !important;
}
}

Ally09 · August 12, 2021

On 12/14/2020 at 11:53 PM, TOMweb said:
Add to Design > Custom CSS
@media screen and (max-width:767px) {
div#page-section-YOURSECTIONID>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}
🙂

Hello! This code worked perfectly for me but I just have a slight problem. I have 5 images in my desktop view and I wanted it to be viewed as 2-2-1 per row but when I applied this code, the 2nd line only has 1 image and the third one has two but I wanted it the other way around. If you could reply to this, it would be much appreciated. Thank you!

tuanphan · August 14, 2021

On 8/12/2021 at 8:57 AM, Ally09 said:

Hello! This code worked perfectly for me but I just have a slight problem. I have 5 images in my desktop view and I wanted it to be viewed as 2-2-1 per row but when I applied this code, the 2nd line only has 1 image and the third one has two but I wanted it the other way around. If you could reply to this, it would be much appreciated. Thank you!

Hi. Can you share link to page where you have problem? We can check easier

Ally09 · August 15, 2021

On 8/14/2021 at 2:55 PM, tuanphan said:

Hi. Can you share link to page where you have problem? We can check easier

Hello! I this is my client's account and it is not published yet so I don't know how I'm supposed to show you.

tuanphan · August 16, 2021

21 hours ago, Ally09 said:

Hello! I this is my client's account and it is not published yet so I don't know how I'm supposed to show you.

If your site is private/ trial, you can setup password & share url

chrisshaddock · September 13, 2021

I need to piggy-back on this thread and ask for help. I have sections that hide in mobile view and a section the reveals in mobile view. In the section that reveals in mobile view I am also trying to have 2 images side x side. I found the script in the thread but have since made an update and now hold of the images do it.

The page is https://www.10peaks.ca/10pix-speakers

The code I am using is

/* Mobile - Speakers side x side */
@media screen and (max-width:767px) {
div#page-section-6131314e8395b25bc06cc9ba>.row>.col> {
width: 50% !important;
float: left !important;
}
}

I am hoping @tuanphan or someone can help.

tuanphan · September 16, 2021

On 9/14/2021 at 2:03 AM, chrisshaddock said:

I need to piggy-back on this thread and ask for help. I have sections that hide in mobile view and a section the reveals in mobile view. In the section that reveals in mobile view I am also trying to have 2 images side x side. I found the script in the thread but have since made an update and now hold of the images do it.

The page is https://www.10peaks.ca/10pix-speakers

The code I am using is

/* Mobile - Speakers side x side */
@media screen and (max-width:767px) {
div#page-section-6131314e8395b25bc06cc9ba>.row>.col> {
width: 50% !important;
float: left !important;
}
}

I am hoping @tuanphan or someone can help.

Hi,

Which section are you referring to? Can you take a screenshot? We can check easier

s7udiostars · September 19, 2021

On 6/24/2021 at 10:55 AM, tuanphan said:

Do you want fix these?

Site URL – https://www.s7udiostars.com/

1. (Mobile-Footer) Center all elements in footer?

2. (Tablet-Homepage) Reduce text size?

3. (Tablet-Header) Align social – menu?

4. (Mobile-Shop) Change category links to 2/3 lines, instead of scrollbar

5. (Mobile-Products) Change related products to 2 items/row?

6. (Mobile-Products) Change related products to 2 items/row?

Hi there! that would be amazing, thank you i appriciate it a lot!
i actually first now have been able to find this again, as i wanted to ask you about those things :)

tuanphan · September 20, 2021

On 9/19/2021 at 7:11 PM, s7udiostars said:

Hi there! that would be amazing, thank you i appriciate it a lot!
i actually first now have been able to find this again, as i wanted to ask you about those things :)

#1. Add to Design > Custom CSS. If it works, I will continue checking other problems

/* Mobile center footer */
@media screen and (max-width:767px) {
footer.sections * {
    text-align: center !important;
}
}

Anele0610 · October 8, 2021

Hey @tuanphan!

I've used this code:

/* Posters side by side */
@media screen and (max-width:767px) {
div#page-section-614f4c5d0d9cbb50826dbe97 .span-2 .image-block {
    width: 20% !important;
    float: left !important;
    padding: 20px !important;
    clear: none !important;
}
div#page-section-614f4c5d0d9cbb50826dbe97 .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}

and it worked on my mobile footer for social icons, however, the two bottom icons are now NOT clickable, even though they must be, and the two top ones are fine. Can you help? 🙂

Link: https://bird-apricots-y5tt.squarespace.com/

passw: 123squarespace

Thanks!

tuanphan · October 10, 2021

On 10/8/2021 at 6:35 PM, Anele0610 said:
Hey @tuanphan!

I've used this code:
/* Posters side by side */
@media screen and (max-width:767px) {
div#page-section-614f4c5d0d9cbb50826dbe97 .span-2 .image-block {
    width: 20% !important;
    float: left !important;
    padding: 20px !important;
    clear: none !important;
}
div#page-section-614f4c5d0d9cbb50826dbe97 .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}
and it worked on my mobile footer for social icons, however, the two bottom icons are now NOT clickable, even though they must be, and the two top ones are fine. Can you help? 🙂

Link: https://bird-apricots-y5tt.squarespace.com/

passw: 123squarespace

Thanks!

Don't remove above code. Add this to Design > Custom CSS

div#block-yui_3_17_2_1_1633085901839_31678 {
    clear: left !important;
}

Anele0610 · October 11, 2021

@tuanphan Thanks, works like a charm 🙂

s7udiostars · October 14, 2021

On 9/20/2021 at 2:50 PM, tuanphan said:
#1. Add to Design > Custom CSS. If it works, I will continue checking other problems
/* Mobile center footer */
@media screen and (max-width:767px) {
footer.sections * {
    text-align: center !important;
}
}

@tuanphan #1 did work, and looks super good, thank you!
I am exited about the other codes 🙂

tuanphan · October 15, 2021

20 hours ago, s7udiostars said:

@tuanphan #1 did work, and looks super good, thank you!
I am exited about the other codes 🙂

#2. It looks like you changed text & solved?

#3, #4. Use this CSS

/* tablet align menu social */
@media screen and (max-width:991px) and (min-width:768px) {
.header-menu-actions {
    margin-left: 7vw;
}
}
/* Mobile */
@media screen and (max-width:767px) {
/* Shop page category links */
ul.nested-category-children {
    flex-wrap: wrap !important;
}
}

s7udiostars · October 15, 2021

1 hour ago, tuanphan said:

#2. It looks like you changed text & solved?

#3, #4. Use this CSS

/* tablet align menu social */
@media screen and (max-width:991px) and (min-width:768px) {
.header-menu-actions {
    margin-left: 7vw;
}
}
/* Mobile */
@media screen and (max-width:767px) {
/* Shop page category links */
ul.nested-category-children {
    flex-wrap: wrap !important;
}
}

@tuanphan I dont think i have changed text?
But #3 and #4 looks good now ! thank you :)!

Esoes_design · October 16, 2021

Hi @tuanphan

Still have the same problem with the page services below :

https://wisteria-pomegranate-drf5.squarespace.com/services

Pass : Esoes

Here is the code I Used :

/* Images side by side */
@media screen and (max-width:767px) {
div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child {
    display: flex;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}
div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child>.col {
    width: 50% !important;
}
}

Thanks for your help !

tuanphan · October 18, 2021

On 10/17/2021 at 2:47 AM, Esoes_design said:

Hi @tuanphan

Still have the same problem with the page services below :

https://wisteria-pomegranate-drf5.squarespace.com/services

Pass : Esoes

Here is the code I Used :

/* Images side by side */
@media screen and (max-width:767px) {
div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child {
    display: flex;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}
div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child>.col {
    width: 50% !important;
}
}

Thanks for your help !

Can you describe again the problem? Thank you

Images side by side on mobile

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources