-
Posts
-
Hi,
The site in private content looks great on computers but the header and footer are way too large on mobile devices. Can you help me with the CSS for those?
Thanks!Hey connect4consulting,
Thank you for the inquiry.
You can add this css code code to adjust the font size of the elements in the header and footer.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .phone-info a { font-size: 12px !important; } #socket .sub_menu_socket li { line-height: 1.4em; } }Regarding the slider caption, try to edit the slides’ Styling > Font Sizes settings. You can define font size values for different breakpoints or screen sizes.
Best regards,
IsmaelHi,
You can adjust the value for all breakpoints, including the first one, which applies to desktops or large screens. To adjust the style of the slider buttons on smaller screens, you can add the following css code:
/* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 768px) { /* Add your Mobile Styles here */ #top .container .slideshow_inner_caption .avia-slideshow-button { margin-top: 10px; padding: 6px 8px; font-size: 13px; } }Best regards,
IsmaelHi,
The page title displays fine on our end. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:
1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.
Best regards,
IsmaelHi,
Thank you for the screenshot.
You can use this css code to adjust the height of the title in the breadcrumb container.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #top .title_container .main-title { line-height: 0.8em; margin-bottom: 20px; } }Best regards,
IsmaelHi,
.main-title looks like a different font or font weight
Looks like the title is set to use a lighter font weight instead of the default 400. Did you configure the Heading elements in the Enfold > Advanced Styling tab? You can also adjust it with this css:
#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .socket_color h1 { font-weight: 400; }Regarding the burger/mobile menu, try to edit the Main Menu (Icon) elements in the Advanced Styling panel, or use this css code:
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a { color: #ffffff; font-size: 18px; line-height: 1.8em; } .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover a, #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:hover { background-color: #333366; color: #ffffff !important; }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.