Images side by side on mobile

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

9 hours ago, tuanphan said:

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

it looks like this, when i choose "ipad"

@tuanphan

Yes, let me explain again.

I have two images side to side on desktop version :

I would like the same on mobile version :

As this page :

But I wasn't able to reproduce the same with the code you gave me. I changed the page id but it's still don't work.

thanks for your help !
Lucie

On 10/18/2021 at 8:45 AM, tuanphan said:

Can you describe again the problem? Thank you

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-60a16b3a6bbf946c5d043b2e .span-5 .span-4 .span-2 {
    width: 50% !important;
    float: left !important;
}
}

@s7udiostars

@media screen and (max-width:1024px) and (min-width:768px) {
/* image 123 */
div#block-yui_3_17_2_1_1626345508961_40873+.row .image-title * {
    font-size: 20px;
}
/* image 456
div#page-section-6058d2ded607a06ccc5e14c8 .image-title * {
    font-size: 20px !important;
}
/* image 789 */
div#page-section-605906607b4d59585583ac12 .image-title * {
    font-size: 20px;
}
}

56 minutes ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-60a16b3a6bbf946c5d043b2e .span-5 .span-4 .span-2 {
    width: 50% !important;
    float: left !important;
}
}

@s7udiostars

@media screen and (max-width:1024px) and (min-width:768px) {
/* image 123 */
div#block-yui_3_17_2_1_1626345508961_40873+.row .image-title * {
    font-size: 20px;
}
/* image 456
div#page-section-6058d2ded607a06ccc5e14c8 .image-title * {
    font-size: 20px !important;
}
/* image 789 */
div#page-section-605906607b4d59585583ac12 .image-title * {
    font-size: 20px;
}
}

 

@tuanphan just tried 🙂

@tuanphan

Hi ! Did you get time to look my small problem that I explained before ?

Thanks you sooo much !

Lucie

On 10/22/2021 at 10:44 PM, Esoes_design said:

@tuanphan

 

Hi ! Did you get time to look my small problem that I explained before ?

Thanks you sooo much !

Lucie

I answered above

On 10/21/2021 at 10:38 PM, s7udiostars said:

@tuanphan just tried 🙂

Which code did you add?

above 2 code for 2 websites

6 hours ago, tuanphan said:

Which code did you add?

above 2 code for 2 websites

@tuanphan These is all code i have added 🙂

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

The table looks fine here.

https://www.s7udiostars.com/

21 hours ago, tuanphan said:

The table looks fine here.

https://www.s7udiostars.com/

 

Ah okay, maybe its just mine 🙂
@tuanphan what was the next step ?

On 10/28/2021 at 5:33 PM, s7udiostars said:

Ah okay, maybe its just mine 🙂
@tuanphan what was the next step ?

Step for? What do you mean?

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 i was here i reffered to 🙂
i belive we are at this step "5. (Mobile-Products) Change related products to 2 items/row"

On 10/31/2021 at 8:51 PM, s7udiostars said:

@tuanphan i was here i reffered to 🙂
i belive we are at this step "5. (Mobile-Products) Change related products to 2 items/row"

Add to Design > Custom CSS

/* Mobile Related Products */
@media screen and (max-width:767px) {
.ProductItem-relatedProducts.ProductList .list-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

8 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile Related Products */
@media screen and (max-width:767px) {
.ProductItem-relatedProducts.ProductList .list-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

 

@tuanphan looks good, thank you! :))

On 11/2/2021 at 9:18 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile Related Products */
@media screen and (max-width:767px) {
.ProductItem-relatedProducts.ProductList .list-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

 

Hey @tuanphan would you be able to make our (mobile) product on a row of 3 or 4 instead of one?
thank you 🙂

15 hours ago, s7udiostars said:

Hey @tuanphan would you be able to make our (mobile) product on a row of 3 or 4 instead of one?
thank you 🙂

Can you share link to page where you want make 3-4?

On 11/7/2021 at 5:14 AM, tuanphan said:

Can you share link to page where you want make 3-4?

@tuanphanyes here: https://www.s7udiostars.com/all

On 11/12/2021 at 2:39 AM, s7udiostars said:

@tuanphanyes here: https://www.s7udiostars.com/all

Find this code and change number 2 to 3

@media screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        display:grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 10px;
    }
}

Hi! I'm having a similar problem. My home page looks great on desktop but I'd love to have the images on the homepage in columns of 2 and a lot smaller to attempt to emulate the desktop version. website below!

Thanks in advance!

https://www.andreworkinmusic.com/

On 11/20/2021 at 2:12 AM, ajgorkin said:

Hi! I'm having a similar problem. My home page looks great on desktop but I'd love to have the images on the homepage in columns of 2 and a lot smaller to attempt to emulate the desktop version. website below!

 

Thanks in advance!

https://www.andreworkinmusic.com/

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-6183cf0a1e84e05f87639de9 .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#page-6183cf0a1e84e05f87639de9 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}

On 11/20/2021 at 9:47 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-6183cf0a1e84e05f87639de9 .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#page-6183cf0a1e84e05f87639de9 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}

 

Hi, I'd like to put 2 inline images side by side on mobile view what code can I use for this? I have attached two pictures for reference.

On 11/24/2021 at 4:44 PM, VEXEDMEDIA said:

 

Can you share link to page in screenshot? We can check easier

hi @tuanphan,

i have a similiar issue.

Domain: www.layers.squarespace.com

Password: Layers

i have a few company logos at the bottom of the homepage that i want to change from one to two images per row. Attached the image below.

Appreciate the help! thank you.

Regards,
Sherman

On 12/9/2021 at 2:26 PM, Sherman said:

hi @tuanphan,

i have a similiar issue.

Domain: www.layers.squarespace.com

Password: Layers

i have a few company logos at the bottom of the homepage that i want to change from one to two images per row. Attached the image below.

Appreciate the help! thank you.

 

Regards,
Sherman

 

Because these are blank, so very complex to change to 2 items/row

Can you add 3 colored image here? Then we can solve problem easier (we can use code to hide these colored image if you want)