how to put 2 image side by side on mobile view

Site URL: https://arabicafes.com/chemex

Hello, i would like to put the 2 images side by side on view mobile instead of seeing them on top of each other.

I didn't find code for this. Could you help me?

Thank's 

10 hours ago, Mevn said:

Site URL: https://arabicafes.com/chemex

Hello, i would like to put the 2 images side by side on view mobile instead of seeing them on top of each other.

I didn't find code for this. Could you help me?

Thank's 

what is your site url

Hi

The URL of my website is : https://arabicafes.com/chemex with the password : arabicafestest

Thank's

On 5/10/2021 at 2:55 PM, Mevn said:

Hi

The URL of my website is : https://arabicafes.com/chemex with the password : arabicafestest

Thank's

Add to Design > Custom CSS

/* Icons side by side */
@media screen and (max-width:767px) {
div#page-section-6012c481f06e8a07d24061a6 .span-12 .span-1 {
    width: 15% !important;
}
div#page-section-6012c481f06e8a07d24061a6 .span-12 .span-1 .image-block {
    width: 100%;
}
div#page-section-6012c481f06e8a07d24061a6 .span-12 .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
}

Thank you ! It's work perfectly ! You are a genius 😉 

5 hours ago, Mevn said:

Thank you ! It's work perfectly ! You are a genius 😉 

Do you need to fix these?

Site URL: https://arabicafes.com/

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

2. (Tablet-Homepage) change to 2 or 4 items/row?

3. (Tablet-Shop) Add a space on left & right of screen? – Change to 2 items/row?

4. (Mobile-Shop) Change Filter button style?

5. (Mobile-Products) Increase variant dropdown width?

6. (Tablet-Products) Add a padding on left of screen?

7. (Mobile-Products) Add breadcrumb on top of products?

Yes totally, I hadn't paid attention to the view on the tablet.

It could be very nice to change all this 🙂

For the question 2, i think could be great with 2 item per row.

For the question 3, good idea to have sapce on left & right screen 😉

On 5/12/2021 at 10:09 PM, Mevn said:

Yes totally, I hadn't paid attention to the view on the tablet.

It could be very nice to change all this 🙂

For the question 2, i think could be great with 2 item per row.

For the question 3, good idea to have sapce on left & right screen 😉

Q1, 2, 3. Add to Design > Custom CSS

/* tablet issues */
@media screen and (max-width:991px) and (min-width:768px) {
/* remove white bar */
html, body {
    overflow-x: hidden;
}
/* gallery 2 items row */
[data-section-id="5ff59ec810b8ec33bb97885d"] .gallery-grid-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
}
/* shop page padding */
.tweak-products-width-full .products.collection-content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
}
}

Try & let me know. I will continue check other problems

it works perfectly well 🙂 

I try some code for q4 to q7 but it's not working.

Have you a solution for that? 

Thank's 🙏

On 5/18/2021 at 3:28 AM, Mevn said:

I try some code for q4 to q7 but it's not working.

Have you a solution for that? 

Thank's 🙏

Sorry, I'm overloaded so I can't answer all questions at once, only 2-3 questions/time. But will try to help you solve all problems.

Q4, 5. Add to Design > Custom CSS

/* mobile */
/* Filter button style */
button.mobile-filter-trigger {
    background: #e46c3d !important;
    margin-left: 0 !important;
    font-family: 'Caveat';
}
@media screen and (max-width:767px) {
.ProductItem-details .product-variants {
    width: 100%;
}
}

Yeah sure, no problem. Thank you for Q4 & 5, work perfectly well :) 

I have the same problem as what I explained at the top of the post.
I can't put 2 images next to each other on the mobile view.
How can I fix this problem?

Thank you

url: https://arabicafes.com/aeropress

password: arabicafestest

6 hours ago, Mevn said:

I have the same problem as what I explained at the top of the post.
I can't put 2 images next to each other on the mobile view.
How can I fix this problem?

Thank you

url: https://arabicafes.com/aeropress

password: arabicafestest

Add to Design > Custom CSS

/* Mobile icons side by side */
@media screen and (max-width:767px) {
div#page-section-6017e3c14f4ce571ffef302e .span-6 .span-2 {
    width: 20% !important;
    float: left !important;
}
div#page-section-6017e3c14f4ce571ffef302e .span-6 .span-2 {
    width: 20% !important;
    float: left !important;
}
div#page-section-6017e3c14f4ce571ffef302e .span-6 .span-1 {
    width: 30% !important;
    float: left !important;
}
div#page-section-6017e3c14f4ce571ffef302e .span-6 .span-1 .image-block {
    padding: 0 !important;
    width: 100%; /* icon size */
}
}

Thanks, but it's not working really good.

You can see what's happened with this code.

On 5/26/2021 at 11:21 PM, Mevn said:

Thanks, but it's not working really good.

You can see what's happened with this code.

Use new code

/* Mobile icons side by side */
@media screen and (max-width:767px) {
div#page-section-6017e3c14f4ce571ffef302e {
.span-6 .span-2 {
    width: 20% !important;
    float: left !important;
}
.span-6 .span-1 {
    width: 30% !important;
    float: left !important;
}
.span-6 .span-1 .image-block {
    padding: 0 !important;
    width: 100%; /* icon size */
}
.span-6 .span-2 .spacer-block {
    display: block;
}
}
}