Larger logo messes header in mobile
- This topic has 5 replies, 2 voices, and was last updated 5 years, 4 months ago by
. This post has been viewed 1188 times
-
Posts
-
Hi again,
Your fix worked for the sign-in page so we don’t want to change that, but how can we make the larger logo (313px x 54px) work in mobile view, especially it seems to mess up the header in portrait tablet.
Thank you
Hello,
First you should apply the code we sent to you only in the signin page. For it edit the signin page and add a custom class in the html tag:
Signin Page:
<html class="the-signin-page">
Then, modify the CSS code to:
@media(max-width: 575px) { .the-signin-page .logo > img { width: 200px !important; /* Try increase a bit the logo width */ height: auto !important; top: -10px; /* Positive values move to down. Negative values moves to top. */ position: relative; } }This way the logo will be resized only in the signin page.
As you can see in the image below, a logo with 313px x 54px is very big and will break somethings in the head when viewing at tablets:
The solution is hide the search field on tablets:
To hide the search field, change the HTML to:
<form action="pages-search-results.html" class="search nav-form d-md-none d-lg-inline-flex">......</form>
* Note
d-md-none d-lg-inline-flex.We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Hi,
The logo appears pixelated/somewhat degraded in desktop view in the admin layout (looks okay in tablet and mobile view). Logo image is 625px by 108px. In the HTML, we have the height set at 54px.
Thank you for your help as always.
Hello,
The original logo image size is 625 x 108, right ?
So make sure you set the image logo size to:
<img src="xxxxxx" width="312.5" height="54" alt="" />
The same for CSS code:
width: 312.5px !important; height: 54px !important;
Also add this CSS in the logo image:
.the-signin-page .logo > img { image-rendering: -webkit-optimize-contrast; transform: translateZ(0); }Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
Hello,
This is responsive.
This technique will turn the logo compatible with retina devices and should resolve the pixelated/blur issue.
The code we sent for you worked ?
If not, please send a online link with your project for us, so we can inspect the code and send the best solution for you.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
This topic is marked as "RESOLVED" and can not rceive new replies.