-
Posts
-
Hi,
I have two problems with the appearance of the social media icons.
1. On the computer, my header social icons are displayed in the top bar at the right, and this in the header secondary menu. After some changes made at the page they appear here darker, larger and separated by thin bars from each other instead of being brighter, smaller and not separated as before (they still appear as before when I change the location to the main header area).
2. As to the mobile, originally they did not appear at all (in the header and in the footer). After using the code
@media only screen and (max-width: 479px) {
ul.social_bookmarks {
display:block !important;
}
}
the social media icons appear correctly in the footer, but not in the header, here they appear twice, once in the “large version” (you only see the bottom of the icons as they are too large) in the top bar at the right, the other time in the menu and logo section, where they appear in the “normal version” (brighter, smaller and not separated) also at the right.
What can be done? I want the social media icons in the header on the computer in the usual, “small version” and on the mobile in the top bar at the right, also in the usual, “small version”.
Thanks in advance!
Cheers, Franziska
P.S. One more thing, could you advise how to add on the mobile version the arrow “back to the top” in the footer (just above the social media icons on the computer). Thanks!Hi again,
Don’t bother with the issue mentioned under P.S. I found the code for “back to the top” on the mobile and it works just fine.
Another problem occurred in the meantime. Could you please advise on the code for making the font size for the post titles smaller (slider and single page).
Thanks!
Cheers, FranziskaIt’s me again, sorry …
I solved the problem with the social icons that are too dark, too large and separated with small bars (changed setting with advance styling, small bar above main menu, that I had set earlier …).
I still have the issue with the social icons on the mobile, i.e. they appear twice in the header …
And I still want the font size of the blog titles on the front page and the single page to be reduced.
Thanks for your kind attention!
Cheers, FranziskaHi,
Add this to quick css:
@media only screen and (max-width: 767px) { article .slide-entry-title.entry-title { font-size:14px; } .post-title.entry-title{ font-size:18px!important; }}Which set of social icons do you want to remove?
Best regards,
Jordan ShannonHi Jordan,
The social icons are okay on the computer now (I have it in the header, in the top bar – in the secondary menu – and in the footer).
As to the mobile, they appear in the top bar – in the secondary menu -, but only the lower half of them. Here I want them to be, but of course in the way you can see them completely (not only the lower half of them). In addition, they appear also in the menu and logo section. Here I want them to be removed.
I hope, you understand what I mean. I cannot send you a screenshot via the img function, I don’t have an URL for pictures …
Thanks.
Best regards, FranziskaHi Franziska,
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 (max-width:767px) { .responsive #top #wrap_all #header #header_meta .social_bookmarks { display: block; margin-top: 0; } .responsive #top #main .av-logo-container .main_menu .social_bookmarks { display: none; } .avia-menu.av_menu_icon_beside { border: none; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
Thanks, that worked fine! Could you provide an additional code so that the social media icons also appear in the footer, please!
Jordan indicated on codes for changing font sizes for blog titles on the front page and on the single page, which did not work but I managed to solve that myself. I still have an issue with the font size of blog titles, and this is in the featured image slider I have on the front page. Could you advise on a code how to change it, it has to be smaller. That would be great!
Many thanks!
Best regards, FranziskaHi Franziska,
Oh, I did not see the issue with the footer links.
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 (max-width: 479px) { .responsive.html_top_nav_header #socket .social_bookmarks { display: block; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria
Thanks again, the code worked fine, the mobile social media icon issue is now settled!
As to my problem of the too large font size of the blog titles on the front page (in the feature content slider), could you please advise on a code how to make these titles smaller.
Thanks and best regards, FranziskaHi swisstraveler,
They seem to look ok on my end or do you need them smaller? For what screen sizes?
Best regards,
VictoriaHi Victoria
Thanks for your fast answer. They look okay on the computer but they are much too large on the mobile (you even cannot see the whole title). Maybe one should only make them smaller on the mobile?
Best regards, Franziska aka swisstravelerHi swisstraveler,
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 (max-width:767px) { #top #wrap_all .avia-content-slider .slide-entry-title { font-size: 16px; line-height: 26px; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
Thanks for the code but it did not work, neither in Enfold>General Styling>Quick CSS nor in Enfold>Appearance>Customize>Additional CSS. No change whatsoever … What shall I do?
Thank you!
Best regards, FranziskaHi,
Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.
Best regards,
Jordan ShannonHi Jordan
I did now add the code at the top of quick css and cleared the cache on all devices (I assume you mean the browsers’ cache …). Still, everything remains as it was, the blog titles in the slider on the mobile (I cleared the cache here as well) are still too large. What do you suggest?
Thanks in advance.
Best regards, FranziskaHi swisstraveler,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi swisstraveler,
Yes, I meant password and user, but we cannot provide a phone number. Is there another way to authorize our access?
Best regards,
VictoriaHi,
Sorry for the delay. We added the following code in the Quick CSS field to adjust the font size of the caption title.
.avia-caption-title { font-size: 1em; }Thank you for your patience.
Best regards,
IsmaelHi Ismael
No problem, thanks for solving the font size issue!
While you are at it, I spotted another thing to improve. It is in the “Leave a Reply” section of the single post in the mobile version. Here you cannot read the “Save my name, email, and website in this browser for the next time I comment” properly. Could you help with this one, too?
Thank you!
Best regards, FranziskaHi,
You’re welcome!
You can use this one to add some space or margin below the checkbox.
.comment-form-cookies-consent { margin-bottom: 20px !important; } .comment-form-cookies-consent label { margin-top: -5px; }If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Best regards,
Ismael
- You must be logged in to reply to this topic.