Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 5, 2016 at 2:49 pm #559944
    jeffreyvanoostrom

    Hi guys,

    I’ve made a website with this great, versatile theme. Most of the custom css changes work great, except the following 3.

    1: I’ve set a home icon for “home”. Only on the mobile menu, the divider line goes trough the home icon.
    This is my menu navigation label for the home icon.
    [av_font_icon icon='ue821' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='16px' position='left' custom_class=''][/av_font_icon]
    Should I add a line height, so it’s ok on the mobile menu?

    2: On the slider on the homepage, I’ve put green checkmarks, using the av font shortcode below
    [av_font_icon icon='ue812' font='entypo-fontello' style='' caption='' link='' linktarget='' size='25px' position='left' color='#6ed157'][/av_font_icon]
    This works, only the checkmark is not responsive, while the rest of the text in the layerslider is responsive. How to make the checkmark responsive as well?

    3: On the “services” page, I’ve put in a table. This looks great. But the desciption column disappears on phones and tablets. I thought is was below css which causes that issue. But even without any css, the desciption column disappears.
    .pricing-table-wrap:first-child {
    width: 550px;
    }

    I think my current table style will not work well on tablets and phones. Is there a way to show current table on monitors of, let’s say 900 px and bigger, and make an extra (new) table for smaller media devices?

    Looking forward to your feedback and help.
    Thanks a lot

    BR
    Jeff

    January 6, 2016 at 4:30 am #560295
    Elliott

    Hi jeffreyvanoostrom!

    1. Add this to your custom CSS.

    #mobile-advanced #menu-item-3287 > a {
    height: 52px !important;
}

    2. You can use this CSS to target them on smaller screens.

    @media screen and (max-width: 767px) {
.avia-layerslider span.av-icon-char {
    font-size: 12px !important;
}
}

    3. Add this.

    .fallback-table-val {
    visibility: visible !important;
}

    Regards,
    Elliott

    January 6, 2016 at 9:07 pm #560750
    jeffreyvanoostrom

    Hi Elliott,

    Thanks for the swift response. 1 and 2 work great, thanks a lot for that.

    The code for issue 3 doesn’t work well. I’d rather use a custom css to display this current table on bigger screens, and a new table (styled more like the Enfold default pricing table) on the smaller screens

    Current table is placed in a color section, so can I use the Section ID to display it only on bigger screens (and the extra, new table to show only on smaller screens)?

    Thanks

    BR
    Jeff

    January 7, 2016 at 2:47 am #560910
    Elliott

    Hi!

    Yeah, you can use some CSS like so.

    @media screen and (max-width: 767px) {
#ID_of_mobile_section { display: none !important; }
}
@media screen and (min-width: 767px) {
#ID_of_desktop_section { display: none !important; }
}

    Best regards,
    Elliott

    January 7, 2016 at 9:54 am #561080
    jeffreyvanoostrom

    Hi Elliott,

    Wow nice! It’s time you get a big statue :-)
    I might have some questions regarding cell padding/ cell height, but let me try it myself first.

    Thanks a lot for the awesome support

    BR
    Jeff

    January 7, 2016 at 12:06 pm #561126
    jeffreyvanoostrom

    Hi Elliott,

    If you check the page on a smartphone, you’ll see the extra table. Looks and works great, except that the first and second column ends with an empty cell. How to remove those?

    BR
    Jeff

    January 7, 2016 at 3:31 pm #561282
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 769px) {
li.empty-table-cell {
    display: none!important;
}}

    Best regards,
    Yigit

    January 7, 2016 at 4:06 pm #561320
    jeffreyvanoostrom

    Thanks Yigit,

    That worked great.

    BR
    Jeff

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom css’ is closed to new replies.