Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Images side by side on mobile


TOMweb

Question

Site URL: https://endive-denim-89ds.squarespace.com/resorts

pw: 1404-Hello

Hi community,

I have made a wall of images on my page that looks great on desktop, but feels way too long on mobile. I would like to display two images per row (kind of like an instagram page) for mobile screens only. I have tried with the code below that targets the section only, but it doesn't put the images side by side...

Any help is appreciated. Thank you !

@media screen and (max-width:767px) {
div#page-section-5fd63cbbc4373837b905ef57>.row {
    display: float;
    justify-content: space-between;
    align-items: center;
  width: 50% !important;
  float: left;
}}

 

Link to comment

Recommended Posts

  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Link to comment
  • 0
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?

s7udiostars.com-01-min.png

2. (Tablet-Homepage) Reduce text size?

s7udiostars.com-02-min.png

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

s7udiostars.com-03-min.png

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

s7udiostars.com-04-min.png

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

s7udiostars.com-05-min.png

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

s7udiostars.com-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

142812234_Capturedecran2021-07-28a13_25_20.thumb.png.fd60d12895c68a5d1d9edb40643875c4.png

409882058_Capturedecran2021-07-28a13_30_46.thumb.png.a196ba758bd02dbf9263596b6772b9cd.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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. 

 

 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

s7udiostars.com-01-min.png

2. (Tablet-Homepage) Reduce text size?

s7udiostars.com-02-min.png

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

s7udiostars.com-03-min.png

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

s7udiostars.com-04-min.png

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

s7udiostars.com-05-min.png

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

s7udiostars.com-06-min.png

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 :)

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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!

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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 🙂

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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 :)!

Link to comment
  • 0

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 !

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 10/15/2021 at 5:29 PM, s7udiostars said:

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

#2. I see it is fine to me. You can check again

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

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

×
×
  • Create New...