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

Site URL: https://www.rebeccapeloquin.com/contact

Hi there- 

I've tried various CSS codes but I can't seem to get my Wells template gallery pages to show as columns on mobile vs stacking. I'd like 2 or 3 columns but I can't get it to work for gallery pages only blocks.

Any ideas? 

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

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

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.

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

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 😳

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?

I currently have them all removed bc they appear and I couldn't figure out how to hide them. I can add one if you want to see/test?

4 hours ago, RPeloquin said:

I currently have them all removed bc they appear and I couldn't figure out how to hide them. I can add one if you want to see/test?

You can add for 1 image. I can check easier

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!

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

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

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

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 

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

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

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

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! 

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?

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/

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