Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 16, 2014 at 10:35 am #336683
    aadler

    Is it possible to switch icon box design inb mobile view – in desktop view they are side by side icon on top, but in mobile view i would like them to switch to “icon on the left” to not create a silly overly high page.
    Another small problem which I haven’t really solved satisfactorily is the logo itself i mobile view, i added som e css i found:

    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img { max-width: 80%; height: auto !important; }
    .responsive #header .social_bookmarks { width: auto; }}
    @media only screen and (max-width: 480px) {
    .logo a {
    top: 15px;
    }
    }

    Which kind of solves the problem on small screens, bunt in the in-between-size the logo jumps up, which i don’t like. Note that i really don’t know any html/css myself, i am just stupidly pasting whatever i find…

    A great theme you have done, and great support!

    October 16, 2014 at 3:27 pm #336807
    Yigit

    Hi aadler!

    Please change following code

    @media only screen and (max-width: 480px) {
.logo a {
top: 15px;
}
}

    to following one

    @media only screen and (max-width: 768px) {
.logo a {
top: 15px;
}
}

    Then turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and add another iconbox element which displays icons on the left side and give it a class “mobile-iconbox” and give the iconbox element with icon on top “desktop-iconbox” and then add following code to Quick CSS field

    @media only screen and (max-width: 768px) {
.desktop-iconbox { display: none !important; }}
@media only screen and (min-width: 769px) {
.mobile-iconbox { display: none !important; }}

    Regards,
    Yigit

    October 16, 2014 at 4:20 pm #336857
    aadler

    Ok, so i paste the .php-snippet here:

    https://www.dropbox.com/s/wksuhkjgqxw97uh/Sk%C3%A4rmdump%202014-10-16%2017.18.47.pdf?dl=0

    October 17, 2014 at 2:58 am #337082
    Ismael

    Hey!

    You can now add custom css class on the iconbox elements. Meaning, you need to create two iconboxes then add a custom css class on both of them. Use media queries as suggested above to show the other iconbox while hiding the other one vice versa.

    Best regards,
    Ismael

    October 17, 2014 at 7:33 am #337195
    aadler

    I am not experienced in editing anything myself, so: the php-thing: do i just paste it in t the end of the text in the view of the screen shot? When i tried to find the functions.php-file in ftp just to be able to back it up – just in case – i didn’t find it.

    October 17, 2014 at 1:54 pm #337310
    Yigit

    Hi!

    After adding the code to functions.php file you should see custom CSS class field – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/blur.jpg
    You can follow the instructions i posted here – https://kriesi.at/support/topic/iconbox-in-mobile-view/#post-336807
    and display different icons on mobile

    Best regards,
    Yigit

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