This topic has 13 replies, 3 voices, and was last updated 7 years by Radu.

  • Author
  • #172489
     gm713
    Participant

    Hi. I want to set the order for how elements stack vertically in smartphone view, when placed in a row.

    As an example, consider a  50/50 row. Normally the elements in the left column will stack above the elements in the right column. I want to reverse it i.e. elements in right column should stack above the elements in left column.

    How do I accomplish that?

    #172492
     Kieran_SQ
    Moderator

    Hi @gm713,

    I am going to forward this ticket to one of our developers as I do not have a solution for you, they will be in touch either on Monday or Tuesday.

    Thanks for your patience,

    Kieran.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

    #172828
     gm713
    Participant

    Hi. Wanted to follow up on this. Thanks!

    #172870
     Radu
    Moderator

    Hi,

    Can I view that page to can see exactly your landing page? now it says maintenance

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #173093
     gm713
    Participant

    We’re in the process of overhauling the website, but here’s what you can do to replicate it.

    Create a row with 2 columns in a span6 + span6 format. Add text block on left and image on right. When browser size is reduced to smart phone view, the text (left block) appears on top and image (right block) appears below.

    I want to flip that order so that the image block appears on top and text appears below.

    #173276
     Radu
    Moderator

    Hi,

    Just add a custom class for the main row named <b>custom-cols-order</b>

    Then for the first column (left one) add a custom class named <b>float-left-flip</b> and for the second (the right one) add this class name <b>float-right-flip</b>

    Then add the css to wp-admin -> theme options -> General settings -> Quick CSS

    COPY CODE
    
    @media(max-width:991px){
        .custom-cols-order .vc_row {display: grid;}
        .float-left-flip {order: 2 !important;}
        .float-right-flip {order: 1 !important;}
    }
    

    That’s it
    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #173486
     gm713
    Participant

    Unfortunately, that didn’t work. Just to be sure I’m entering this in the correct field (see attached), right?

    Also, any reason why I shouldn’t enter this in style.css in child theme? I would like all my css mods to be in one place, and I prefer it there.

    Attachments:
    You must be logged in to view attached files.
    #173573
     Radu
    Moderator

    Remove the

    COPY CODE
    <b> </b>

    tags

    from that field, leave only custom-cols-order class.

    Then add the css to wp-admin -> theme options -> General settings -> Quick CSS or in style.css frmo child theme ass you wish

    COPY CODE
    
    @media(max-width:991px){
        .custom-cols-order .vc_row {display: grid;}
        .float-left-flip {order: 2 !important;}
        .float-right-flip {order: 1 !important;}
    }
    

    Then add this class float-left-flip to the first column and this float-right-flip to the second.

    Then in mobile those will be in reverse order

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #174661
     gm713
    Participant

    That worked beautifully. Thanks!

    #174674
     gm713
    Participant

    Hi Radu,

    While this seems to work at Tablet view, when the view is changed to smartphone view, the right column seems to go back below the left column.

    Can you please take a look. Thanks!

    #174675
     gm713
    Participant

    To add more details, it flips back to the original order at 768px and below.

    #174825
     Radu
    Moderator

    Hi,

    Add also this css beside that

    @media(max-width:640px){
    .custom-cols-order .vc_row {display: grid !important;}
    .float-left-flip {order: 2 !important;}
    .float-right-flip {order: 1 !important;}
    }

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #175041
     gm713
    Participant

    That did it, thanks!

    #175088
     Radu
    Moderator

    Great
    Cheers
    R

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Viewing 14 posts - 1 through 14 (of 14 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?