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

Needing CSS code for a 2 columns in the mobile view on 2 different pages


JohnLiquori

Question

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

Hello,

I have seen a few other forums looking for similar resolution, but having trouble implementing it for my site. I have two pages on my site that I am happy with in the desktop view, but would like them to appear as two columns in the mobile view rather than one continuous column. Would anyone be able to help me with some custom CSS code for each of these pages? 

https://www.johnliquoriphoto.com/pricing

https://www.johnliquoriphoto.com/home-prep-checklist

This would be super helpful. Thanks in advance!

Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 1
On 8/29/2021 at 4:27 AM, JohnLiquori said:

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

Hello,

I have seen a few other forums looking for similar resolution, but having trouble implementing it for my site. I have two pages on my site that I am happy with in the desktop view, but would like them to appear as two columns in the mobile view rather than one continuous column. Would anyone be able to help me with some custom CSS code for each of these pages? 

https://www.johnliquoriphoto.com/pricing

https://www.johnliquoriphoto.com/home-prep-checklist

This would be super helpful. Thanks in advance!

Hi,

With Pricing Page, add to Design > Custom CSS

/* Mobile text 2 columns */
@media screen and (max-width:767px) {
/* Pricing */
div#block-8643f4d164a74095d08c+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
}

With checklist page

Step 1. Add a Line Block under each section

image.thumb.png.0e7549822f7e988fc4feaff79a663113.png

 

Step 2. Remove Line Block & let me know. We will check & give the code to make 2 columns on mobile

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 1
14 hours ago, JohnLiquori said:

Thank you, that code worked perfectly for the pricing page!

For the checklist page, I followed your directions and added a line block between each section then removed the line blocks. Please let me know what the next step would be.

Add to Design > Custom CSS

/* Checklist page-mobile - icon text 2 columns */
@media screen and (max-width:767px) {
/* icons */
div#block-yui_3_17_2_1_1629761211275_60147~.row>.col:first-child {
    width: 30% !important;
    float: left !important;
}
/* text */
div#block-yui_3_17_2_1_1629761211275_60147~.row>.col:not(:first-child) {
    width: 70% !important;
    float: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Thank you, that code worked perfectly for the pricing page!

For the checklist page, I followed your directions and added a line block between each section then removed the line blocks. Please let me know what the next step would be.

Link to comment
  • 0
On 9/1/2021 at 6:39 AM, JohnLiquori said:

Thank you, that code worked perfectly for the pricing page!

For the checklist page, I followed your directions and added a line block between each section then removed the line blocks. Please let me know what the next step would be.

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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