Avenue Mobile Index Page Column

Site URL: http://www.calhadaway.com

Hey guys,

I am using the Avenue template and wanting to make the auto columns minimum amount from 1 to 2.

So currently in mobile view it is a single column for the index page. But I would love 2 columns for it (But keep the wide screen view as 3 culumns.

Example of what I want. https://alvarobeamudcortes.com/ 

Thank you so much!

Try adding to Design > Custom CSS

@media only screen and (max-width: 640px) {
    .wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    a.project {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    a.project img {
        height: 100%!important;
      	width: 100%!important;
    }
}

Hey @tuanphan

Thank you so much for responding and helping!

I tried the code but it resulted in tablet mode staying 1 column and the mobile mode having huge gaps between index images.

I'm hoping for both of those modes to have 2 columns that flow the same order as the computer mode.

I left the code in so you can see the results

www.calhadaway.com

Let me know 

On 9/14/2022 at 11:35 PM, Calxx said:

Hey @tuanphan

Thank you so much for responding and helping!

I tried the code but it resulted in tablet mode staying 1 column and the mobile mode having huge gaps between index images.

I'm hoping for both of those modes to have 2 columns that flow the same order as the computer mode.

I left the code in so you can see the results

www.calhadaway.com

Let me know 

Hi. Can you take a screenshot on mobile?

@tuanphan

Screenshots added below.

So basically instead of the images showing as 2 columns in order. They are a single column on the left side going down with large gaps between them.

On 9/19/2022 at 9:38 AM, Calxx said:

@tuanphan

Screenshots added below.

So basically instead of the images showing as 2 columns in order. They are a single column on the left side going down with large gaps between them.

Thank you. You can remove the code, I will check it again