wells-template Is there responsive css to display pages on the Wells template at full width for tablet and desktop, and columns for mobile?

Hello,

Is there CSS to optimize my Wells template pages for full width responsive design in displaying my pages at full width for desktop and tablet, and columns for mobile.

Here is a link to my pages: https://www.andyryanphotographer.com/projects

Thanks

You mean make 3 items/row on mobile??

Hi @tuanphan,

I had replied, but it was regarding another post. 

For this, issue, the projects page has a photo grid with photos manually added and the clickthrough option to the specific project gallery. https://www.andyryanphotographer.com/projects

To answer your question:

• Desktop and Tablet: Responsive max 3/row, minimum 2/row
• Mobile: Max 1/row

But specific for this page only.

Let me know if you need any additional information.

Thanks

On 2/13/2022 at 5:23 AM, arpllc said:

Hi @tuanphan,

I had replied, but it was regarding another post. 

For this, issue, the projects page has a photo grid with photos manually added and the clickthrough option to the specific project gallery. https://www.andyryanphotographer.com/projects

To answer your question:

• Desktop and Tablet: Responsive max 3/row, minimum 2/row
• Mobile: Max 1/row

But specific for this page only.

Let me know if you need any additional information.

Thanks

Add to Design > Custom CSS

/* Projects 1 item row mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1643385275940_1762 .slide {
    width: 100% !important;
}
}

Hello @tuanphan, 

Thanks for this. Unfortunately, it is not currently working in the projects gallery :

https://www.andyryanphotographer.com/projects

Just to clarify: I am looking to take this page for full width on tablet and desktop.

• Desktop and Tablet: Responsive max 3/row, minimum 2/row
• Mobile: Max 1/row

But specific for this page only.

Thanks!

On 2/15/2022 at 2:54 AM, arpllc said:

Hello @tuanphan, 

Thanks for this. Unfortunately, it is not currently working in the projects gallery :

https://www.andyryanphotographer.com/projects

Just to clarify: I am looking to take this page for full width on tablet and desktop.

• Desktop and Tablet: Responsive max 3/row, minimum 2/row
• Mobile: Max 1/row

But specific for this page only.

Thanks!

It looks like you fixed?

6 hours ago, tuanphan said:

It looks like you fixed?

Unfortunately, no. It does not work when I implemented the CSS. It just remains the same for responsive design. I am looking for this page to go full width for up to 3 wide for desktop and tablet, then one row for mobile. The code did not change the width of the page.

Hi

I have same issue. 

I want to have one column of images in gallery page on mobile and 2/3 columns on desktop. 

I've used this code and now I have one column in mobile but also one on desktop. 

On 4/14/2022 at 10:02 PM, dorotapo said:

Hi

I have same issue. 

I want to have one column of images in gallery page on mobile and 2/3 columns on desktop. 

I've used this code and now I have one column in mobile but also one on desktop. 

Can you share link to page where you have problem? We can check easier