Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 22, 2018 at 4:39 am #976081
    navindesigns

    HI,

    On this page, ONLY on mobile I would like to display 2 column instead of one stack ontop of eachother

    Montreal Tigers

    Thanks

    June 22, 2018 at 7:46 am #976125
    Ismael

    Hey navindesigns,

    Thank you for using Enfold.

    Use this css code to adjust the column width on mobile view.

    @media only screen and (max-width: 767px) {
.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + .av_one_fourth.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth.flex_column_div {
    margin-left: 4%;
    width: 48%;
}
}

    Let us know if it helps. You may need to purge the cache afterwards.

    Best regards,
    Ismael

    June 23, 2018 at 4:19 pm #977021
    navindesigns

    I am sorry but that did not work

    Montreal Tigers

    June 25, 2018 at 1:53 am #977276
    Ismael

    Hi,

    Thanks for the update.

    We modified the code a bit. It should work now. Don’t forget to remove the browser cache or hard refresh the page.

    Best regards,
    Ismael

    June 25, 2018 at 2:45 am #977292
    navindesigns

    i am sorry but I just changed my columns to “equal height” and it not showing properly on mobile. I should have told you I wanted equal height columns. sorry about that

    June 25, 2018 at 5:53 am #977318
    navindesigns

    Also now columns on other pages are now rendering correctly on mobile.

    Ex- http://www.gt20.ca/match-schedule/

    Home

    Please help

    June 25, 2018 at 5:57 am #977320
    navindesigns

    Here is my login if you need it

    June 25, 2018 at 12:24 pm #977397
    Victoria

    Hi navindesigns,

    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) {
  .responsive #top .container .av-content-small, 
  .responsive #top #wrap_all .flex_column, 
  .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin-left: 2%;
    width: 48%;
    float: left; /* added this line to the Ismael's code*/
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 25, 2018 at 2:25 pm #977486
    navindesigns

    Thanks

    Some columns towards the bottom (with long title names) are appearing incorrectly.

    http://www.gt20.ca/montreal-tigers

    June 26, 2018 at 5:54 am #977796
    navindesigns

    This page including the footer widgets are broken. Pls help

    Teams

    June 27, 2018 at 10:44 pm #978591
    Basilis

    Hi,

    I just loaded the page and I can see it just fine.
    Are you sure you are having problems?

    Best regards,
    Basilis

    June 27, 2018 at 11:55 pm #978620
    navindesigns

    here are some mobile screenshots

    https://imgur.com/a/hDhngC6 – homepage – http://www.gt20.ca/

    https://imgur.com/a/NW9E3Zq – team page – http://www.gt20.ca/montreal-tigers/

    June 30, 2018 at 3:27 pm #979593
    Mike

    Hi,
    For the /montreal-tigers/ page I found that your page began with a single full column that the css was changing the width to match the other 1/4 team columns, so I changed the css to target only the 1/4 columns. Then I added a min-height to the team columns so they all would match the ones that have a larger caption. I also added a page ID to the css so it will not interfere with other pages, and removed the duplicate code in the Quick CSS. This seems to solve this issue. Please clear your browser cache and check.
    2018-06-30_090955
    For the 1/4 columns at the top of your homepage, I added this css:

    @media only screen and (max-width: 767px) {
    .responsive #top.home #wrap_all .flex_column.av_one_fourth {
      margin-left: 2%;
      width: 48%;
      float: left;
    }
  }

    But I’m unsure if you want the same for the team logo area on the home page as they are 1/3 columns, and look good full width on mobile, in my opinion.
    Please advise.

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.