mobil look

[Zsuzsanna Pócsiné Maros]

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

[Zex]

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 2 years, 10 months ago by Zex.

[Zsuzsanna Pócsiné Maros]

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

[Zex]

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;
 }
}

[Zsuzsanna Pócsiné Maros]

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!

[Zex]

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

[Zsuzsanna Pócsiné Maros]

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

[Zex]

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

[Zsuzsanna Pócsiné Maros]

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

[Zex]

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 2 years, 10 months ago by Zex.

[Zsuzsanna Pócsiné Maros]

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

[Zex]

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

[Zsuzsanna Pócsiné Maros]

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!

[Zex]

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

[Author]

Posts