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

how to put 2 image side by side on mobile view


Mevn

Question

  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 h

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

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 i

Posted Images

15 answers to this question

Recommended Posts

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

Capture d’écran 2021-05-09 à 19.16.32.png

what is your site url

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.thumb.png.ab2b74c241820c8ba02e0f30fae8b031.png

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

arabicafes.com-01-min.png

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

arabicafes.com-02-min.png

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

arabicafes.com-03-min.png

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

arabicafes.com-04-min.png

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

arabicafes.com-05-min.png

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

arabicafes.com-06-min.png

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

arabicafes.com-07-min.png

Link to post
  • 0
Posted (edited)

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 😉

Edited by Mevn
Link to post
  • 0
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

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

 

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

Capture d’écran 2021-05-26 à 10.53.55.png

Capture d’écran 2021-05-26 à 10.54.21.png

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 */
}
}

 

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

Capture d’écran 2021-05-26 à 18.20.43.png

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

image.thumb.png.196b13bceb9b7b7093d44dc7eb88a7ba.png

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...