Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2817631
mobile display
Closed

Comments

  •  1
    shirleydt started the conversation
    July 3, 2021 at 9:53pm

    Hello, greetings!

    For pages that have 4 columns or more, I'd like to show 2 columns at a time side by side on mobile devices.  How to make that happen?  So far by default always show one column at a time. 

    Also, I'd like this setting to ignore side bar and only focus on the main page.  This means that let's not treat sidebar as a column.  Is it possible?

    Thanks!

    Shirley

  •  2,494
    PenciDesign replied
    July 4, 2021 at 3:27am

    Hi,

    Please send me a related page URL with your request. I'll check and send you a solution.

    Regards,
    PenciDesign.


  •  1
    shirleydt replied
    July 4, 2021 at 9:14pm

    Hello

    two examples:

    1.) page with sidebar, ignore the side bar. 

    https://homenaturallymade.com/recipe-index/

    i want two posts pictures show up side by side on mobile. 


    2/ page without sidebar. 

    I am working on a new homepage. see the top boxes area where I plan to place 4 boxes.  On mobile, I'd like to show 2 boxes side by side. 

    hope the solution will work for the entire page, as I plan to add featured category 6 columns.  I'd like to display 2 columns side by side at one time.  

    https://homenaturallymade.com/home/

    Thanks!

    Shirley

  •  2,494
    PenciDesign replied
    July 4, 2021 at 9:30pm

    Hi,

    1. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    @media only screen and (max-width: 480px) {
        .fwpl-layout {
            grid-template-columns: 1fr 1fr;
            margin: 0 -10px;
        }
    .fwpl-result {
            padding: 0 10px;
        }
    }
    2. This boxed is build with Elementor, so you can easily change the column on your mobile by specifying the column width. Please read the instruction here: https://elementor.com/help/mobile-editing/

    Regards,
    PenciDesign.

  •  1
    shirleydt replied
    July 5, 2021 at 4:42pm

    Hi, 

    For 1, the code didn't work. 

    Thanks!

    Shirley

  •  2,494
    PenciDesign replied
    July 5, 2021 at 4:50pm

    Hi,

    Please clear your site cache after adding the custom CSS code.

    I've checked your site and the CSS you've added not available in the source code.

    Regards,
    PenciDesign.


  •  1
    shirleydt replied
    July 5, 2021 at 5:09pm

    Hi, that is because I removed the code after I found out it didn't work.  Now I added the code back.  Please check. 


    Thanks!

    Shirley

  •  2,494
    PenciDesign replied
    July 5, 2021 at 5:12pm

    Hi,

    Your plugin overwrite the custom CSS code, please modify like this:

    @media only screen and (max-width: 480px) {
    .fwpl-layout {
        grid-template-columns: 1fr 1fr !important;
        margin: 0 -10px;
    }
    .fwpl-result {
        padding: 0 10px;
    }
}

    Regards,
    PenciDesign.


  •   shirleydt replied privately
  •  2,494
    PenciDesign replied
    July 5, 2021 at 6:21pm

    Hi,

    I mean the plugin: facetwp. The layout I've customized for you is built with this plugin. For more advance, please contact this plugin developer.

    Regards,
    PenciDesign.