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

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


GatheredByArt

Question

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

818958180_Screenshot2022-03-22140217.thumb.png.5dd9eaef4a46d3b35e7d267fbe0f3974.png1426482394_Screenshot2022-03-22140310.thumb.png.9a70a727c31772a6714cb80f1a03980f.png

On Mobile View

453797650_Screenshot2022-03-22140330.png.73436a716190ccdd420a09b04d71e1ad.png176302044_Screenshot2022-03-22140348.png.884d0ff376ff0a4163952a151d4bc686.png

Link to comment

6 answers to this question

Recommended Posts

  • 0

Don't remove any code in your current code. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
div#page-section-623a1a8f52b1027b453db400 * {
    font-size: 16px;
}
ul.nested-category-children {
    flex-wrap: wrap !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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

1345745130_Webcapture_25-3-2022_213018_gatheredbyart.squarespace_com.jpeg.9778ac53d771b9cbe28c28f81673d6ca.jpeg

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

1635030819_Webcapture_25-3-2022_213034_gatheredbyart.squarespace_com.jpeg.2c915792166dcb0e6689cad28bd11f43.jpeg

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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