Hi there,
I currently control my settings regarding the mobile version of my website. I do have one problem with my logo: Its position should be above the golden bar, it should be static and should not overlap the other elements (similar to the desktop version). I tried to add a line in my CSS file (e.g. position: static
, but it didn´t worked. I was also not sure to which of the "logo" areas in the CSS file it belongs. Do you have any tips?
https://artbykathrinmarieschneider.weebly.com
I would appreciate any help!
Thanks a lot
Marie
@MarieSchneider The issue isn't with the positioning of your logo but rather its size. Logo images are by default set to shrink for mobile viewports (so that the logo will fit within the confines of the mobile header bar). In your theme, while the mobile viewports logo size is set to a maximum height of 30px, this is being overridden by the css maximum height attribute setting of 250px from the desktop viewport settings. The "!important" qualifier has been added to that desktop logo maximum height attribute and, since that same qualifier does not exist on the mobile css logo size setting, the smaller mobile logo size never kicks in and that's why your desktop-sized logo is bleeding out beyond the confines of the mobile header bar. (Note that there's also a code error in the attribute below the max-height attribute for "max-weight" - this css attribute does not exist - you probably meant "max-width".)
You need to remove the "!important" qualifier from the logo's (desktop) max-height attribute.
.cento-header .logo img {
display: block;
max-height: 250px !important;
max-weight: auto;
position: relative;
}Now, you almost certainly forced the desktop logo size on the mobile view because you felt that the mobile logo size was too small. This is simply due to the vertically chunky nature of your logo image which doesn't lend itself well to being printed at smaller (mobile) sizes without a significant loss of legibility. Below is your logo as presented on the desktop:
And here is what it should look like on mobile (if the desktop size was not forced via the "!important" qualifier on the max-height attribute):
So the issue here is really that you have a somewhat tall logo packed with text that doesn't lend itself well to presenting within smaller containers (mobile header bars, business cards, etc.). It's generally not a good idea to pack a lot of text into a logo (because as you shrink all that text, it will become increasingly more difficult to read). Check out the logos of any major company in any industry and you'll see that they all follow the "less is more" design approach with simplified, large text (if there is any text) because a logo can appear on devices as small as a smartwatch. Accordingly, logos should be designed to present reasonably legibly across a very wide variety of container sizes.
Now, an alternative approach would be to have a desktop version of your logo and a more concise or differently laid out mobile version for smaller containers. Unfortunately, the Weebly logo container doesn't include a way to contain different desktop and mobile logos. However, this can be done in a reasonably straightforward way with some html (for the two logo image references) and a css media query (that turns off the desktop logo image and turns on the mobile logo image on mobile viewports and vice versa on desktop viewports). But that is a bit beyond the scope of this reply.
I'd suggest you simply contemplate a modification to the way your logo is designed (aim to use more horizontal space than vertical).
