Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 18, 2017 at 1:41 am #840696
    Scott

    Hey guys- not sure if this has changed in recent updates and that’s why this CSS isn’t working for me, or if i’m just missing div/class declarations here… but i’m trying to target one_fifth columns (and also 1/6 columns setup as a one_fifth column in a Color Section) so that they load on mobile/handset at 1/2 (or 2 across vs. taking up a full width for each column…these are icon based links so the full width is too big on a handset.

    I have this in the Quick CSS now:

    @media only screen and (max-width: 768px) {
.flex_column.av_one_fifth {
width: 14.5%;
margin-left: 2%;
}
}

@media only screen and (max-width: 768px) { .flex_column.av_one_fifth.first {
clear: none;
margin-left: 2%;
}
}

@media only screen and (max-width: 768px) {
.flex_column.av_one_fifth:nth-child(6) {
margin-top: 0 !important;
}
}

    but this is not doing the trick.
    thanks for any help…

    August 18, 2017 at 8:19 am #840781
    Rikard

    Hey Scott,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 18, 2017 at 6:13 pm #840981
    Scott

    Here are 2 links posted privately since this is our dev server… both are using the one_fifth Avia column… the first has this in a special color section so i can have 6 across… the second is a standard one_fifth. I’m assuming here that a media query based CSS declaration here can hit all one_fifth column classes so these icon based lists can render on a handset as two across (or one_half depending on the CSS targeted).

    thanks Rikard!

    August 22, 2017 at 7:15 am #842332
    Ismael

    Hi,

    Thank you for the info.

    Please add this css code.

    @media only screen and (max-width: 768px) {
    .responsive #top #wrap_all .av_one_fifth {
       width: 50%;
       margin: 0;
       display: inline-block;
       float: none;
   }
}

    Best regards,
    Ismael

    August 26, 2017 at 2:22 am #844259
    Scott

    awesome- thanks ismael. now for one more issue with this (now that that’s working)… the margins between the heading and the icons on that same page are much too large and look like they are actually for the next icon, not the current… i tried this:

    @media only screen and (max-width: 768px) {
.av-special-heading .av-special-heading-h3 .blockquote .modern-quote .modern-centered .avia-builder-el-24 el_after_av_image .avia-builder-el-last  {
margin-top: 5px!important; 
margin-bottom: 10px!important;
}
}

    but i am not getting any love out of it (even with the dreaded !important tags.. .ha!).
    what am i missing here? when i look at th e code it looks like this should wrap these headings all up and be fairly straight forward…

    thanks again!

    August 30, 2017 at 12:08 pm #845750
    Victoria

    Hi Scott,

    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 (min-width: 768px) {
  .hr-full.avia-builder-el-17  {
    margin: 20px 0;
  }
  #after_full_slider_1 .content, .sidebar {
      padding-top: 20px;
      padding-bottom: 20px;
}
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

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