Jump to content

Seeking 2 or 3 column view on mobile for Wells Gallery pages

Recommended Posts

  • 2 weeks later...
On 5/1/2021 at 1:06 AM, tuanphan said:

You mean change Contact Page to 2 columns on mobile??

No I mean make the gallery pages view as 2 columns on mobile- right now they stack as only one and I haven't been able to find code that modifies the gallery page view- only if you had a gallery block.

I'm on Wells template in 7.0

 

Link to comment
On 5/11/2021 at 8:33 AM, RPeloquin said:

No I mean make the gallery pages view as 2 columns on mobile- right now they stack as only one and I haven't been able to find code that modifies the gallery page view- only if you had a gallery block.

I'm on Wells template in 7.0

 

 

17 hours ago, sheilabuchanan said:

I have the same problem with Wells - wondering if you figured it out? I want to make my portfolio gallery two columns instead of one on the tablet.

Add to Design > Custom CSS

/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#slideshow {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

 

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
1 hour ago, RPeloquin said:

This totally worked! Thank you so much!

Also is there a way to hide image titles and description? I'd like to use the fields for SEO (right now have them blank) but they show up on mobile 😳

Where is title/description?

image.thumb.png.47f3f6713ca5db42565f9c0a0399dc89.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
23 hours ago, RPeloquin said:

I just added a title and a description to the first stop motion in the beverage section : https://www.rebeccapeloquin.com/beverage to illustrate.

If there is a way to ideally hide the title and description that would be amazing!

Thank you!

 

 

Add to Design > Custom CSS

/* hide image title desc */
div#imageData {
    display: none !important;
}

 

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
  • 10 months later...
On 4/13/2022 at 10:32 PM, Annie12345 said:

Hi @tuanphan

I am looking to change the stack on my mobile version to two images side by side rather than one on top of each other  I am using a new version of the wells theme, please can you help please? My url is www.annienoble.co.uk 

 

Thanks, 

Annie

Add to Design > Custom CSS

/* Keep mobile layout */
@media screen and (max-width:640px) {
div#page-61ec020b6aa1be77c4b26ef1 .span-4 {
    width: 33.3333% !important;
    float: left !important;
}}

 

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
23 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Keep mobile layout */
@media screen and (max-width:640px) {
div#page-61ec020b6aa1be77c4b26ef1 .span-4 {
    width: 33.3333% !important;
    float: left !important;
}}

 

Thank you @tuanphan this worked but I now have x3 columns on mobile is It possible to have x2? and for it to work on tablet/ipad as well?

Thanks - Annie 

Link to comment
On 4/19/2022 at 4:27 PM, Annie12345 said:

Thank you @tuanphan this worked but I now have x3 columns on mobile is It possible to have x2? and for it to work on tablet/ipad as well?

Thanks - Annie 

With tablet, just edit 640px to 900px

WIth 2 columns, it will be ugly. If you still want 2 columns, remove above code & add this new code

@media screen and (max-width:640px) {
div#page-61ec020b6aa1be77c4b26ef1 .span-4 .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
    margin: 0 !important;
}
div#page-61ec020b6aa1be77c4b26ef1 .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
}}

 

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
3 hours ago, tuanphan said:

With tablet, just edit 640px to 900px

WIth 2 columns, it will be ugly. If you still want 2 columns, remove above code & add this new code

@media screen and (max-width:640px) {
div#page-61ec020b6aa1be77c4b26ef1 .span-4 .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
    margin: 0 !important;
}
div#page-61ec020b6aa1be77c4b26ef1 .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
}}

 

Thank you @tuanphanplease can I also have the same spacing between the images though with the x2 columns

Link to comment
On 4/23/2022 at 12:36 AM, Annie12345 said:

Thank you @tuanphanplease can I also have the same spacing between the images though with the x2 columns

Try this new code

@media screen and (max-width:640px) {
div#page-61ec020b6aa1be77c4b26ef1 .span-4 .image-block {
    width: calc(~"50% - 5px") !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
    margin: 0 !important;
}
div#page-61ec020b6aa1be77c4b26ef1 .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
    margin-right: 10px !important;
    margin-bottom: 10px !Important;
}}

 

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
  • 9 months later...
On 2/7/2023 at 12:55 AM, Aidan2991 said:

Hi @tuanphan, I have copied your code into the CSS however it doesnt seem to change the mobile version of my site. 

I would like all my gallery pages to display 2 columns of images and not just the one stack of images at the moment. 

Can you help me? 

Website: https://www.aidanbrooks.co.uk

Thank you! 

Hi,

Just tried the code & works here. Can you try it again?

image.thumb.png.2a5ef555d76a0308fba56e8defcf3a5a.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
  • 6 months later...
On 9/4/2023 at 10:29 PM, poscher said:

Hi @tuanphan, I have a similar question and tried to adapt the code you provided to make it work. I would like to show 2 columns (or 3 if it looks better) on my main page in mobile view instead of stacked images. Can you help me out please? 
https://www.bernhardposcher.com/

I see this text + instagram icon only..

image.thumb.png.cae6c4d434cffd2674ca7c2be07dab04.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

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.