mobil look
- This topic has 13 replies, 2 voices, and was last updated 2 years, 10 months ago by
Zex.
-
AuthorPosts
-
August 7, 2020 at 1:41 pm #27618
Zsuzsanna Pócsiné Maros
ParticipantDear 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!
BarnabasAugust 7, 2020 at 1:54 pm #27619Zex
ModeratorHello, 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.
August 7, 2020 at 2:45 pm #27624Zsuzsanna Pócsiné Maros
ParticipantThanks! It is much better now. Should I lower the letter size to have a better look on mobile screen?
August 7, 2020 at 3:30 pm #27627Zex
ModeratorIf 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; } }
August 7, 2020 at 4:13 pm #27628Zsuzsanna Pócsiné Maros
ParticipantWow, 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!
August 7, 2020 at 4:28 pm #27629Zex
ModeratorTry 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
August 7, 2020 at 7:27 pm #27631Zsuzsanna Pócsiné Maros
ParticipantPerfect, 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!
BarnabasAugust 7, 2020 at 8:04 pm #27632Zex
ModeratorHello,
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
August 9, 2020 at 9:40 pm #27667Zsuzsanna Pócsiné Maros
ParticipantThanks 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!
BarnabasAugust 9, 2020 at 10:19 pm #27668Zex
ModeratorHi,
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.
August 15, 2020 at 1:45 pm #27786Zsuzsanna Pócsiné Maros
ParticipantThe 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:
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
August 15, 2020 at 2:57 pm #27791Zex
ModeratorHi,
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
August 29, 2020 at 3:05 pm #27905Zsuzsanna Pócsiné Maros
ParticipantNew 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!
August 30, 2020 at 11:49 am #27907Zex
ModeratorHello, 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/u8czd8Please, let me know if that isn’t you actually wanted, so I will try to give you another solution.
Regards
-
This reply was modified 2 years, 10 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.