Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1135921

    How can we stagger elements in different order, when switching from 2 column to 1 column (mobile ie)?
    So i have 2 columns – pic on the left and text on the right
    Then my next section has text on the left, pic on the right..
    When on mobile and it switches to 1 column, i would like the text to be below the corresponding pic, like the first section does, but not the 2nd section.
    Thanks!

    #1135997

    This is my page with the elements flowing in default order (i need to change)

    This site for example, has the elements rearranging to text/pic in 1 colum, even though in 2 columns ita laternates
    https://www.aurishealth.com/monarch-platform

    #1136074

    Hi andyux,

    You can use flex, here is an example:

    Best regards,
    Victoria

    #1136119

    Hi, I tried both both places, with no change. Does it work with columns inside a color section? i tried it outside color section with no change too.

    #1136538

    any ideas anyone? buy you a beer

    #1136548

    I found something that may help, code looks right with my limited knowledge

    Image 2019-09-10 at 4.17.55 PM.png

    #1136684

    Hi andyux,

    The css needs to be changed to apply to the elements on your website.

    Which elements do you need to swap? Just the upper image?

    Best regards,
    Victoria

    #1136700

    Hi there! sorry the link i provided was confusing because I had to rearrange all the elements after to be in the same order, for a presentation meeting.

    So in desktop the order alternates between image and text columns, but in mobile they should all be text on top, image on the bottom, like in this graphic
    Image 2019-09-10 at 8.56.56 PM.png
    Thank you!

    #1137826

    Hi andyux,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width:767px){
        #top.page-id-18   #av_section_1 .entry-content-wrapper,
         #top.page-id-18   #av_section_3 .entry-content-wrapper {
            display: flex;
            flex-direction: column-reverse;
        }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1138323

    Got it ! thank you!

    #1138698

    Hi,

    Great, thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1139794

    Somehow the column reverse code stopped working, can you help me, i cant find the reason.

    in the homepage (page#2)
    <div id=”av_section_3″ /

    and the Lobo Tech page (page#18) in 2 places
    <div id=”av_section_1″ /
    <div id=”av_section_3″ /

    Here is my qucik css

    }
    #top #header #avia-menu > li:hover > a span.avia-menu-text {
        color: #006271 !important;
    }
    .sidebar.sidebar_right {
      background-color: ##f8f8f8;
      height: 100vh;
      min-width: 182px;
    }
    @media only screen and (max-width: 1124px) {
    .sidebar.sidebar_right {
     height: 10vh;
    }
    }
    .blog-meta, .post_author_timeline {
    display: none;
    }
    .blog-categories + .text-sep, .blog-author.minor-meta {
        display: none;
    }
    .post-entry span.comment-container.minor-meta,
    .post-entry span.text-sep-comment {
        display: none;
    }
    @media only screen and (max-width:767px){
        #top.page-id-18   #av_section_1 .entry-content-wrapper,
         #top.page-id-18   #av_section_3 .entry-content-wrapper {
            display: flex;
            flex-direction: column-reverse;
        }
    }
    @media only screen and (max-width:767px){
         #top.page-id-2   #av_section_3 .entry-content-wrapper {
            display: flex;
            flex-direction: column-reverse;
        }
    }
    .more-link-arrow{
    display:none!important;
    }
    .more-link,
    .wpforms-submit
    {
    background-color: #d9ab28!important;
    border-color: #d9ab28!important;
    border-radius:5px!important;
    padding:10px 20px!important;
    font-size:13px!important;
    color:#fff!important;
    }
    more-link:hover,
    wpforms-submit:hover
     {
            text-decoration: none!important;
            opacity: 0.9!important;
    }
    div.wpforms-confirmation-container-full {
    	border: #a51e37;
            background: #D9AB28;
    }
    #footer .widget {
        margin: 0 !important;
    }
    .footerfont {
    font-size: 90%;
    line-height: 140%;
    }
    @media only screen and (max-width: 767px) { 
    .footerfont {
    font-size: 70%;
    line-height: 120%;
    }
    }
    @media only screen and (max-width: 767px) { 
    #footer > .container > .flex_column.av_one_half {
    	width: 50% !important; 
    }
    }

    thanks!

    #1140167

    Still trying to figure this out, help? thanks

    #1140666

    Hi andyux,

    I am seeing the text + image structure on mobile, is it not the same for you?

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    #1140691

    Hi Vistoria, i have fixed this – and moved on to a related issue on post

    thanks, sorry for the confusion

    #1140756

    Hi andyux,

    Glad you got it working for you and thank you for letting us know! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.