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

2 columns view on mobile with a button

Question

Site URL: http://fakoshimaesentai.squarespace.com

Site URL: http://fakoshimaesentai.squarespace.com

Hi everyone, I am trying to create a 2 column grid on mobile using css, but the codes that I found do not work for me. I used custom css to create "swap of hover" images, and Now I need to put everything in 2 columns. Another thing is that I need to put a text box and a button underneath each image. If someone knows how to figure it out please help. Appriciate.

The page I need to figure out -https://fakoshimaesentai.squarespace.com/290405038627

Thanks!

@tuanphan I ve seen that you are an expert when it comes to this problem, maybe you can help? thanks! 

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

Add to Home > Design > Custom CSS

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
48 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


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

 

It also doesn't look right when I view it on my phone

photo_2020-08-04_18-49-02.jpg

Share this post


Link to post
  • 0

New code

@media screen and (max-width:767px) {
div#page-section-5f22abf5ea1ff26c41f5d410>.row>.col, div#page-section-5f27e34f062baa1f2b1895e7>.row>.span-3, div#page-section-5f293f044f222031501d1032>.row>.span-3, div#page-section-5f294325c93a86510d89ba7b>.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f22abf5ea1ff26c41f5d410>.row>.col:nth-child(2n+1), div#page-section-5f27e34f062baa1f2b1895e7>.row>.span-3:nth-child(2n+1), div#page-section-5f293f044f222031501d1032>.row>.span-3:nth-child(2n+1), div#page-section-5f294325c93a86510d89ba7b>.row>.span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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