YFGAN Posted September 12, 2020 Share Posted September 12, 2020 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! Link to comment
tuanphan Posted September 12, 2020 Share Posted September 12, 2020 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; } } 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
YFGAN Posted September 12, 2020 Author Share Posted September 12, 2020 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
r_dumbrique Posted June 22, 2023 Share Posted June 22, 2023 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! 🙂 Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 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? 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
r_dumbrique Posted June 23, 2023 Share Posted June 23, 2023 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. Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 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 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
r_dumbrique Posted June 25, 2023 Share Posted June 25, 2023 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 Link to comment
tuanphan Posted June 25, 2023 Share Posted June 25, 2023 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? 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
r_dumbrique Posted June 26, 2023 Share Posted June 26, 2023 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. Link to comment
tuanphan Posted June 27, 2023 Share Posted June 27, 2023 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)) } } 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
r_dumbrique Posted June 27, 2023 Share Posted June 27, 2023 Hi! No that code doesn't work. Do you have another suggestion? Link to comment
tuanphan Posted June 28, 2023 Share Posted June 28, 2023 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)); } 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
r_dumbrique Posted June 28, 2023 Share Posted June 28, 2023 unfortunately those don't not working either Link to comment
r_dumbrique Posted June 28, 2023 Share Posted June 28, 2023 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)); } Link to comment
r_dumbrique Posted June 28, 2023 Share Posted June 28, 2023 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! Link to comment
tuanphan Posted June 30, 2023 Share Posted June 30, 2023 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; } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment