How to display 2 columns on mobile for Template PAZARI

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:

to this:

Thanks in advance!

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

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!

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?

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

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

Thank you in advance for your help!

🙂

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?

 

 

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

 

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

Thank you in advance for your help!

🙂

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

8 hours ago, tuanphan said:

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

 

Hi !

I created a password: spongebob

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

Please let me know if it works.

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

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

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

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

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

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.

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.

 

 

I see you solved with this code?

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

Hi!

No that code doesn't work.  Do you have another suggestion?

spongebob

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

I see it worked here

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

unfortunately those don't not working either

I entered this code but changed the 2 to 1 to see what would happen.  It seems to work for the desktop version which is what i've been trying to achieve.

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

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!

Yes Possible. You can add this code to add extra text for desktop only

@media screen and (min-width:992px) {
a#site-title:after {
    content: "enter your text";
    display: block;
}
}