-
Posts
-
Hi!
Thank you for a fantastic theme. It is a pleasure to work with and looks good. I am setting up a second site using this theme now.
I am experiencing an issue with the header and footer in mobile and tablet view;1. In mobile view the menu is overlapping the header logo and the logo does not scale down.
I have tried some of the quick css codes related to similar issues in the forum without any luck. It would be sweet If the logo scaled down in mobile view (like it does when you scroll down with fixed header), or changed to a smaller image.2. the footer in “tablet view”, I am using 4 footer areas, and would like them to appear as either 4 or 2 or 1 columns. Now there are 3 columns and it does not look too good. This is not a major issue, but would be nice to solve this.
Here is the page: u-monitor.net
Can you please help me resolve this?
Thank you_urban_
ps.
I am currently using this quick css that i found in the forum, but the menu is still overlapping the logo.@media only screen and (max-width: 767px) {
.container .nine.units {
width: auto;
}}Hi _urban_!
Please add this on your Quick CSS or custom.css to fix the logo on 480px screen resolutions:
@media only screen and (max-width: 767px) { .responsive .mobile_slide_out .logo img { margin: 0; width: 80% !important; } }Use this to fix the footer widgets:
@media only screen and (max-width: 989px) and (min-width: 768px) { .responsive #footer .av_one_fourth.first.el_before_av_one_fourth, .responsive #footer .av_one_fourth.first + .av_one_fourth + #footer .av_one_fourth, .responsive .av_one_half.first + #footer .av_one_fourth.el_before_av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + #footer .av_one_half { margin-left: 5%; float: left; clear: none; } .responsive #footer .av_one_fourth.first.el_before_av_one_fourth, .responsive .av_one_fourth.first + #footer .av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + #footer .av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + #footer .av_one_fourth, .responsive .av_one_half.first + #footer .av_one_fourth.el_before_av_one_fourth, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + #footer .av_one_fourth { margin-left: 4%; width: 22%; } }Best regards,
IsmaelDear Ismael!
Thank you for the response! I updated the theme which solved the footer issue. Great!
The quick css for the header worked too. Now the “Slide out navigator icon” does not overlap the logo. Great!However the logo is not keeping its aspect ratio, the height is still 100% but the width:80%. Seems like it does not inherit the aspect ratio. Is it possible to fix this?
Best regards
_urban_Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) { .responsive .mobile_slide_out .logo img { width: 100% !important; } #advanced_menu_toggle, #advanced_menu_hide { right: -15%; }}Best regards,
YigitThanks Ygit!
That code did some improvements however there was some aspect ratio issues on screens between width:767px and width:480px. and the “X icon” for closing/hiding the “slide-out-menu” does not appear, or appears outside the screen on all screen sizes.I changed the code to:
@media only screen and (max-width: 480px) { .responsive .mobile_slide_out .logo img { margin: 0; width: 80% !important; } } @media only screen and (max-width: 480px) { .responsive .mobile_slide_out .logo img { width: 100% !important; } #advanced_menu_toggle, #advanced_menu_hide { right: -15%; }}This maintained the aspect ratio on all screen sizes except screens with exactly 480px width (tried max-width: 481px. and 479px without any luck)
“X icon” for closing/hiding the “slide-out-menu” appears as well, but not on screens smaller than 481px width.Hope you can help me out!
Best Regards_urban_
- You must be logged in to reply to this topic.