Jump to content

How to display 2 columns on mobile for Template PAZARI

Recommended Posts

Site URL: https://heptagon-kazoo-kncp.squarespace.com/config/settings/site-visibility

Hi people,

As I am starting with the template PAZARI in 7.1, the "portfolio" is really neat on the desktop version, and it is possible to customize the number of columns in a row. However, customization of columns is not possible on the mobile version. Any ideas about how to display 2 columns on the mobile version?

 

So basically from this:

IMG_9425.thumb.PNG.2c0aae94cb30027fe9b0ba3fc033b064.PNG

 

to this:

IMG_9426.thumb.PNG.82d91fc84d7c931eb780827beb630152.PNG

 

Thanks in advance!

 

 

Link to comment
  • Replies 16
  • Views 619
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
}

 

It works perfectly now, thank you so much!

Link to comment
  • 2 years later...

Site URL: https://lemon-okra-ryjp.squarespace.com/config/

Hi,

I have a few questions with regards to the Pazari template and I hope you can help me. 

1. Is it possible to reduce the number of columns for the desktop version of the Pazari template?

2. Is it possible to remove the underline below the header text?

nounderline.JPG.f3c4521ab5a01d870a2d03c8bbd6cb94.JPG

 

 

3. Is it possible to move the text on top of the image below the image?text.JPG.f211736c040c88aa9742c8683b70d935.JPG

 

4. Is it possible to justify header text so they align with the website name?

Thank you in advance for your help!

🙂

justification.JPG

Link to comment
11 hours ago, r_dumbrique said:

Site URL: https://lemon-okra-ryjp.squarespace.com/config/

Hi,

I have a few questions with regards to the Pazari template and I hope you can help me. 

1. Is it possible to reduce the number of columns for the desktop version of the Pazari template?

2. Is it possible to remove the underline below the header text?

nounderline.JPG.f3c4521ab5a01d870a2d03c8bbd6cb94.JPG

 

 

3. Is it possible to move the text on top of the image below the image?text.JPG.f211736c040c88aa9742c8683b70d935.JPG

 

4. Is it possible to justify header text so they align with the website name?

Thank you in advance for your help!

🙂

justification.JPG

The site is private. Can you setup an access password?

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
39 minutes ago, r_dumbrique said:

Hi !

I created a password: spongebob

https://lemon-okra-ryjp.squarespace.com/

Please let me know if it works.

#1. Is it possible to reduce the number of columns for the desktop version of the Pazari template?

Which page/section are you referring to?

#2. Underline

Add to Design > Custom CSS

header#header a {
    background-image: none !important;
}

#3. Edit Homepage > Choose layout: Grid - Simple

image.png.2b74a5d9f5edf635ccc48aeb0c49e9b6.png

#4. If align both site title + nav = this blue space, I think this is possible

image.thumb.png.e9d5265ac6c4652324a8aba8caf514e3.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi!

Thank you for your answers.

Regarding question #1. Is it possible to reduce the number of columns for the desktop version of the Pazari template?

I am referring to the work page which also currently set as the home page.  I have attached image file "one column" to show you what the page currently looks like.  

I should probably let you know that the purpose of the website would be to show an interior design portfolio.  The concept is similar to this interior designer's website on this link: https://www.bella-pia.com/work

one column.JPG

Link to comment
11 minutes ago, r_dumbrique said:

Hi!

Thank you for your answers.

Regarding question #1. Is it possible to reduce the number of columns for the desktop version of the Pazari template?

I am referring to the work page which also currently set as the home page.  I have attached image file "one column" to show you what the page currently looks like.  

I should probably let you know that the purpose of the website would be to show an interior design portfolio.  The concept is similar to this interior designer's website on this link: https://www.bella-pia.com/work

one column.JPG

I see you add 1 image block only. What should it look like on mobile?

image.thumb.png.d72a6ae346c3417a1211a474e8a5ee78.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi!

Yes I added a one image block to test a home page.  However my question is with regards to my work page.

The work page as it is displayed in the mobile version is fine for me.  I really like it.  However I would like to reduce the columns of the work page to a single column.  Please see attached images.

 

 

one column.JPG

work page mobile view.JPG

Link to comment
15 hours ago, r_dumbrique said:

Hi!

Yes I added a one image block to test a home page.  However my question is with regards to my work page.

The work page as it is displayed in the mobile version is fine for me.  I really like it.  However I would like to reduce the columns of the work page to a single column.  Please see attached images.

 

 

one column.JPG

work page mobile view.JPG

I see you solved with this code?

@media screen and (max-width: 767px ) {
    .portfolio-grid-basic {
        grid-template-columns:repeat(1,minmax(0,1fr))
    }
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

spongebob

https://lemon-okra-ryjp.squarespace.com/

I see it worked here

image.png.5594daab016a3459fd901e69029d1eec.png

If you need to change to 2 items, use this code

@media screen and (max-width: 767px ) {
    .portfolio-grid-basic {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

If you need code on both Desktop + Mobile, use this code

 .portfolio-grid-basic {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Is it possible to have two different header styles?  I would like a double line site title (site title on the first line with the type of service ie. interior design on the second line) on the desktop version while having a single line with only the site title on the mobile version?

Please see attached images for reference.  Please note these images have been photoshopped.

Thank you!

site header on desktop.JPG

site header on mobile.JPG

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.