Change the 1 long column of images to a 2 row per column in Mobile view

Site URL: https://www.gatheredbyart.com/

Hi!

I would like, for the mobile view, to instead of been a 1 row-1 column to a 2 row per column.

Also the page that says "Explore other services" I like the body been in the middle but in mobile, the body is below the middle picture. It'd be great if it can also be 3 row instead of a long column. 

Much appreciated if anyone can help me, I tried many css coding but I'm not very good at it.

On Desktop View

On Mobile View

I forgot to mention, the categories in shop is cropped in mobile view.

Hello!

I have found the solution to make the images break into 2 per row. This is the code. 🙂

Although it looks good the text seem smaller. Is there a way to make the text bigger and not cut off the word.  Also minimize the padding so that the image doesn't look small?

@media screen and (max-width:767px) {
div#page-section-YOURSECTIONID>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

@tuanphan Thank you so much!

@tuanphanHello! I have another question. In mobile view the text are stacked and I would like them been next to each other. 

Website: Adela Pérez — Gathered By Art

On another noted, the summary in mobile view is in 1 image stack instead of 2 per row.

It would be much appreciated if you can help me. Thanks again for everything!

On 3/26/2022 at 8:41 AM, GatheredByArt said:

@tuanphanHello! I have another question. In mobile view the text are stacked and I would like them been next to each other. 

Website: Adela Pérez — Gathered By Art

On another noted, the summary in mobile view is in 1 image stack instead of 2 per row.

It would be much appreciated if you can help me. Thanks again for everything!

Try adding to Design > Custom CSS

/* Artist Adela mobile */
@media screen and (max-width:767px) {
/* text */
div#block-53a87d042c1cf6a9d0a9+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-53a87d042c1cf6a9d0a9+.row .span-5:before {
    content: "";
    clear: both !important;
    display: table !important;
}
/* Image */
div#block-3df35bb37171aa3a7da7 .summary-item {
    width: calc(~"50% - 20px") !important;
    float: left !important;
    clear: none !important;
    padding: 0 !important;
    position: relative !important;
    height: auto !important;
    left: unset !important;
    top: unset !important;
    right: unset !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}
}