Shop Categories

X

mobil look

Home Forums Agama Pro mobil look

Topic Resolution: Resolved
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #27618

    Dear All,

    How can I delelte the lower border of the top menu and how can I set the site to look good on mobile devices as well (currently unusable)?

    Thanks!
    Barnabas

    #27619
    Zex
    Moderator

    Hello, Barnabas!

    Try to insert the following codes into Customizing->General->Additional CSS:

    .top-nav-wrapper{
        box-shadow: none!important;
    }
    @media screen and (max-width: 992px){
    .top-navigation div.top-nav-menu>ul, .top-navigation ul.top-nav-menu {
        display: block!important;
        }
        #masthead{
            background-size: contain!important;
        }
        .mobile-menu-icons {
        visibility: hidden;
    }
    }

    Regards

    • This reply was modified 1 year, 11 months ago by Zex.
    #27624

    Thanks! It is much better now. Should I lower the letter size to have a better look on mobile screen?

    #27627
    Zex
    Moderator

    If you want the look of your website remains the same as in the desktop view, try to add the following codes additionally(it keeps the background image in the same top-center position):

    @media screen and (max-width: 992px){
    #masthead{
        height: 42vw!important;
        background-position:top center!important;
    }
        #masthead .agama-top-nav a {
        font-size: 2.5vw!important;
    }
    }
    @media screen and (max-width: 600px){
    #masthead .agama-top-nav a {
        font-size: 3vw!important;
        padding-right: 10px;
    }
     #top-navigation ul li {
    display:inline-block;
     }
    }
    #27628

    Wow, much better 🙂 Now please could you send me a code for the same purpose on the breadcrumbs as well (to see properly on the mobile devices as well)?

    Thanks a lot!

    #27629
    Zex
    Moderator

    Try the following code additionally:

        @media screen and (max-width: 600px){
        .vision-page-title-captions{
            display:none;
        }
        .vision-page-title-secondary{
        top:inherit!important;
      }
      .vision-page-title-secondary span{
          font-size:3vw!important; 
    }
        .vision-page-title-bar{
            height:40px!important;
        }
     }

    Regards

    #27631

    Perfect, thanks! Last question for today 🙂
    I am trying to add a picture as the first post, but it wii not show up on the page.
    I use insert media file, picture is in jpg format, but will not appear.
    What could be wrong?

    Many thanks for your continuous help!
    Barnabas

    #27632
    Zex
    Moderator

    Hello,

    That should be a very simple task and it should work without the problem.
    Anyway, Try to change the Featured image and post format,https://prnt.sc/tvvjey or try different blog Layout style…https://prnt.sc/tvvkgc
    what happens then?

    If nothing above didn’t help you, please give me your WP Login credentials in the private reply, so I can check what’s going on directly on your website.

    Thanks

    #27667

    Thanks a lot for your help, really appreciate it!
    On desktop/laptop my site look exactly how I want.
    But on mobile screen it is not that cool yet.
    How can I force the menu into one row and the social icons in the header in the same line, even smaller, as on the desktop page?
    That would me perfectly satisfied 🙂
    Thanks!
    Barnabas

    #27668
    Zex
    Moderator

    Hi,
    in that case maybe the following codes can help you with that:

    @media screen and (max-width: 992px){
            #top-navigation{
                max-width: 80%;
            }
            .top-navigation>ul>li {
                padding-right: 5px!important;}
            
            .top-nav-menu{
                padding-right:10px!important;
            }
            .top-navigation ul.top-nav-menu{
          display:inline-block!important;
            }
            #top-social{
                max-width:20%!important;
            }
            #top-social li .tv-icon{
                font-size: 1.8vw;
                width:15px!important;
                line-height: 22px;
                padding-right:5px;
            }
            #top-social li a{
           width: 4vw!important;
        }
            #masthead .agama-top-nav a {
        font-size: 2vw!important;
     }
    }

    Regards

    • This reply was modified 1 year, 10 months ago by Zex.
    #27786

    The outlook is better and better, thanks!

    I have two problems:
    1) on the mobile screen the main menu is still breaking into two lines. but only in standing mode, in horizontal view, it is perfect. The blog part is very tall on the standing mode.
    2) I have checked the webpage on my work computer as well. it has a 24″ monitor. The page view will not look nice on this big monitor either.

    I have uploaded two pictures, what I mean on the following link:

    sample photos

    So to sum up: it is looking perfect on a 17″ screen and on horizontally turned mobile screen, but needs some more fine tuning on standing mobile screen and big computer screen.

    Could you please send me further codes to fix it?

    Many thanks in advance

    #27791
    Zex
    Moderator

    Hi,

    1.
    Use the following code additionally to fix the mobile view:

    @media screen and (max-width: 500px){
    #masthead .agama-top-nav a {
        font-size: 1.8vw!important;
        padding-right: 0px;
    }
    }

    2.

    @media screen and (min-width: 1200px){
    #masthead .agama-top-nav a {
        font-size: 1.8vw!important;
        
    }
        #masthead .agama-top-nav {
        margin-left:-50px!important;
    }
    }

    Change the font-size and margin-left values as you need.

    Best Regards

    #27905

    New question 🙂 When I post my page, it will show only as a gray field in Facebook. I would like to setup a featured image for each side to show in Facebook posting, but then the featured image will show up on the page as extra content. How can I hide the featured image from all (desktop, mobile) view? My intention is to have a featured image (so it will show up by Facebook posts), but do not see it on the website.

    Thanks!

    #27907
    Zex
    Moderator

    Hello, Zsuzsanna!

    If I correctly understand your question, I suggest you to try to turn off the featured images on the single Blog posts (Customizing ▸ Blog ▸ Single Post)
    https://prnt.sc/u8czd8

    Please, let me know if that isn’t you actually wanted, so I will try to give you another solution.

    Regards

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