Logo too small on iPad and smart phones - Support | Kriesi.at

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
June 18, 2018 at 11:53 pm #974542

suzannewm94
Participant

Hello,

I’m hoping someone can help me with this issue. I’ve just installed a new logo image and it appears correctly when viewed on a desktop computer, but when I view it on an iPad there is way too much white space between the logo and the menu. Then if I view it on a smart phone, the logo is suddenly so tiny that I can barely read it. Is there a way to get rid of the extra white space that I’m seeing on the iPad, make the logo not shrink so much on the smartphone view, but still look okay on the desktop view?

I’ve included a link to my website in the Private Content area.

Thanks in advance for any assistance you can provide.

June 19, 2018 at 4:23 am #974617
Ismael
Moderator
Hey suzannewm94,

Thank you for using Enfold.

Use this css code to adjust the header on mobile view and get rid of the unwanted space.
```
@media only screen and (max-width: 1024px) and (min-width: 768px) {
#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
    height: 172px;
    line-height: 172px;
}
}
```
The logo is that small on phone view because the theme has to create space for the mobile menu and the search icon inside the header. That is the default layout. How would you like the header to display on mobile view?

Best regards,
Ismael
June 19, 2018 at 4:42 am #974625

suzannewm94
Participant

Hi Ismael,

Thanks so much for your help. I don’t know if I inserted the code incorrectly or not, but I don’t see any difference on the iPad view. That same extra white space is there. Do I need to change the pixel size to remove some of the extra white space between the logo and the menu bar? (Sorry, I’m not very tech savvy.)

On the smart phone view, I’d like the logo to be centered and stretch across the width of the screen so that it looks more like the desktop and smartphone views. Is there a way to do that and make it appear a little bigger? Relocating the mobile menu and the search icon is fine with me if that needs to be done to make the logo area bigger on smart phone view.

June 19, 2018 at 12:38 pm #974748
Victoria
Inactive Moderator
Hi suzannewm94,

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: 1024px) and (min-width: 768px) {
  #top #header_main > .container.av-logo-container, 
  #top #header_main > .container.av-logo-container .main_menu .av-main-nav > li > a, 
  #top #header_main #menu-item-shop .cart_dropdown_link {
    height: 172px;
    line-height: 172px;
  }
}
@media only screen and (max-width: 767px) {
  .responsive #top .logo {
      width: 60%;
      margin: 0 auto;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
June 19, 2018 at 12:48 pm #974755

suzannewm94
Participant

Thanks so much, Victoria. That code did a great job of removing all of the extra space on the tablet view and it has the logo more centered on the phone view, which is exactly what I wanted.

On the smartphone view, is there any way to make the logo itself just a little bit larger/wider? It’s a good size on the desktop view and tablet view, but It’s still just appearing a little smaller on phone screens than I hoped it would.

June 20, 2018 at 5:21 am #975079

Ismael
Moderator

Hi,

Thanks for the update.

The current logo will not resize well on smaller screens because it’s a little too wide. It’s not uncommon for websites to have a large version of the logo on desktop view and then another smaller version on mobile. You can either remove the images (girl and balance) from the logo and leave the text or vice versa.

The script from this thread allows you to apply another image or logo for mobile view.

// https://kriesi.at/support/topic/different-logo-in-the-header-for-mobile-version/#post-965244

Best regards,
Ismael

June 20, 2018 at 12:58 pm #975260

suzannewm94
Participant

Thanks Ismael. I created a smaller version of the logo and tried to use the code you provided but I don’t see any difference in size when I view it on my phone. It’s still very small and now it’s pushed over to the left instead of being centered.

Is there a way to move the mobile menu and the search button to somewhere else in the mobile view to give the logo more room at the top to stretch all the way across the phone screen? I don’t really have any preference as to where those two things are located and definitely don’t need them up there with the logo if moving those would give me the look I want with the logo.

If not, I would at least like to get the logo re-centered on the phone view.

Thanks!

June 21, 2018 at 12:16 am #975581
Ismael
Moderator
Hi,

Thanks for the update.

I didn’t find the script inside the functions.php file so I added and modified it a bit. I also used these css codes to adjust the size of the logo on mobile view.
```
@media only screen and (max-width: 1024px) and (min-width: 768px) {
	.responsive .logo img {
   	 	max-height: 200px;
	}
}

@media only screen and (max-width: 767px) {
	.responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container {
		height: 130px;
		line-height: 130px;
	}

	.responsive #top #wrap_all .main_menu {
		height: 130px;
	}
}
```
NOTE: The script will only change the image on page load. It’s not going to work when you resize the browser.

Best regards,
Ismael
June 21, 2018 at 12:39 am #975585

suzannewm94
Participant

Hi and thanks for continuing to assist me with this issue. Unfortunately when I view my site on a tablet and phone now, the images are missing from my logo on both views. I was happy with the way it was looking on the tablet after the tweaks we made before so I didn’t want that one to change any further. On the phone view, the images are also missing from the logo but the logo is also no bigger than it was before and it’s still pushed off to the left rather than centered.

June 21, 2018 at 3:25 am #975617

Ismael
Moderator

Hi,

You have to remove the browser cache to regenerate the scripts and stylesheets. It works fine on my end.

Best regards,
Ismael

June 21, 2018 at 3:52 am #975630

suzannewm94
Participant

Thanks. I thought I had done that, but I just tried it again and now I think I’m seeing what you see. It looks much better on the phone now. It’s definitely big enough and I’m fine with the words-only portion of the logo on the smartphone view. Thanks so much for sorting that out for me.

I don’t know if this is possible, but I really preferred the tablet view the way it was prior to these last tweaks. Is there a way to make it so that only the smartphone view switches to that plain words-only version of the logo? I was very happy with the way the tablet view looked after Victoria provided that coding earlier in the thread when it still had the complete logo with the images on it and would like to get back to that if it’s possible, without messing up what you did to fix the smartphone view. If not, no worries. I just tend to use my tablet in landscape mode and so it looks very plain up there without the complete logo.

June 21, 2018 at 4:56 pm #975860

Victoria
Inactive Moderator

Hi suzannewm94,

Best regards,
Victoria

June 21, 2018 at 10:18 pm #976017

suzannewm94
Participant

Hi Victoria,

What I want for the tablet view is what you’re seeing in the first image you shared (Image 2018-06-21 at 17.55.03.png). That’s actually the way it looked after you helped removed the extra white space that I initially had.

Now, however, I’m not seeing that anymore since the tweaks were made to the phone view. Even after clearing the cache on my iPad repeatedly, I’m seeing a plain text only version of the header. I’ve posted a screen shot of my tablet view in the private content. So what I’m trying to determine now is can I get the tablet view back to the way it looked in your first screenshot without undoing the fix for the smartphone view that Ismael went in and did for me.

June 22, 2018 at 7:00 am #976107
Ismael
Moderator
Hi,

Thanks for the update.

We adjusted the script a bit. You don’t have to do anything. The original logo should be displayed instead of the “cursive” one on tablet or iPad view.
```
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
	?>
	<script type="text/javascript">
		(function($) {
			var image = new Image();
			if($(window).innerWidth() <= 767){		
				image.onload = function () {
				   $('.logo img').attr('src', 'MOBILE LOGO');
				   $('.logo img').animate({'opacity' : 1}, 200);
				}
				image.onerror = function () {
				   console.error("Cannot load image");
				}
				image.src = "MOBILE LOGO";
			} else {
				image.onload = function () {
					$('.logo img').animate({'opacity' : 1}, 200);
				}
				image.src = "DESKTOP VIEW";
			}
			
		})(jQuery);
	</script>
	<?php
}
```
Best regards,
Ismael
June 22, 2018 at 12:33 pm #976293

suzannewm94
Participant

Everything looks great now. Thank you both so much for all of your help!

June 24, 2018 at 11:58 pm #977244

Ismael
Moderator

Hi,

Awesome! Glad we could help!

Please take a moment to review our theme and show your support https://themeforest.net/downloads
Don’t forget to bookmark Enfold Documentation for future reference.

Thank you for using Enfold :)

Best regards,
Ismael
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Logo too small on iPad and smart phones’ is closed to new replies.