Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 18, 2019 at 5:59 pm #1128679
    marcoabis81

    Hi,
    Can you please help me with the code for desktop/mobile view switch?

    @media only screen and (max-width: 989px) and (min-width: 768px) >>>>>> these are the sizes.

    The following is the code I am actually using. How to amend it for the above sizes?

    /* Nascondi menu su desktop */
    @media only screen and (min-width: 767px)
    { .nodesktop
    { display: none !important;
    }
    }

    Thanks

    August 18, 2019 at 8:24 pm #1128714
    Victoria

    Hey marcoabis81,

    Could you please give us a link to your website, we need more context to be able to help you.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    August 18, 2019 at 9:24 pm #1128733
    marcoabis81

    Hi Viktoria,
    basically I would like to have the website switching from desktop view to mobile view much earlier than it does now. So for example switching to mobile view even for screen like tablets, not only for mobiles.
    http://www.ninserviziogratuito.co.uk

    thanks
    Marco

    August 19, 2019 at 5:21 am #1128806
    Jordan Shannon

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Change the value 1024 to the pixel value of your choice.

    Best regards,
    Jordan Shannon

    August 19, 2019 at 1:06 pm #1128894
    marcoabis81

    Hi
    it works, however it does not fix me the issue with the side bar category widget. When I shrink the site the lines go to a new line, but even below the pic.

    This is the page https://www.ninserviziogratuito.co.uk/assicurazione-viaggio-world-nomads
    This is how it looks on desktop view https://www.screencast.com/t/zJbSo0Ks
    This is how it looks on mobile view https://www.screencast.com/t/T0Z4GqD5ITR

    How do I solve the lines going below the pics?

    thanks,
    Marco

    August 20, 2019 at 2:20 pm #1129222
    Ismael

    Hi,

    Thank you for the update.

    You can push the date to the right by adding a left margin. Use this css code.

    .rpwwt-post-date {
    margin-left: 50px;
}

    Put it inside the css media query.

    Best regards,
    Ismael

    August 21, 2019 at 3:56 pm #1129602
    marcoabis81

    Hi Ismael,
    It is keeping the date on the left for not the text (post title).

    Post title is moving below the picture (or just the last line)

    2019-08-21_1454

    Everything would need to go to the right of the yellow vertical bar.

    thanks
    Marco

    August 22, 2019 at 9:21 am #1129894
    Victoria

    Hi Marco,

    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) and (max-width: 1024px) {
  #rpwwt-recent-posts-widget-with-thumbnails-2 img {
    margin-bottom: 75px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 23, 2019 at 11:59 am #1130305
    marcoabis81

    Thank you Victoria
    It works :-)

    August 23, 2019 at 1:19 pm #1130347
    Victoria

    Hi marcoabis81,

    Glad we could help :)

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

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