Header Logo not re-sizing on mobile

This topic contains 12 replies, has 3 voices, and was last updated by  Kor 6 years, 1 month ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • March 24, 2018 at 2:31 pm #423142

    adyp
    Expired Member
    Post count: 496

    Hello,

    when my website loads on mobile the header logo image doesn’t shrink-to-fit, meaning only part of it shows and I get scroll-bar at bottom. I have tried a couple of CSS suggestions that I found here on the forums for the same issue, but neither works.

    Running GDF Modern Child theme – all plugins up to date

    Login to follow…

    March 24, 2018 at 2:35 pm #423143

    adyp
    Expired Member
    Post count: 496
    This reply has been marked as private.
    March 25, 2018 at 8:50 pm #423240

    Alex Rollin
    Moderator
    Post count: 27815

    Hello,

    resizing the logo for mobile view isn’t a feature of the GDF Modern child, and your site behaves exactly as the demo here: https://wpgeo.directory/gdf-modern/

    It appears you are using a logo as a header and that it is quite wide. If you tried one closer to the original on the demo at 274*60 it wouldn’t trigger the scrollbar.

    March 25, 2018 at 11:03 pm #423279

    adyp
    Expired Member
    Post count: 496

    Ah – ok.

    In that case, would it be possible to code a snippet to replace the header logo with a smaller one for mobiles?

    Thanks,
    Adrian

    March 26, 2018 at 4:42 am #423296

    Kor
    Moderator
    Post count: 16516

    Hi adyp,

    Thanks for your reply. I’ve just inspected your Website and I’m able to see the issue there. To fix this, you’ll have to use the custom CSS code below. Insert into GD > Design > Scripts > Custom Style CSS

    

    @media only screen and (max-width: 600px) {
   .site-logo img {
    max-width:100%!important;
}

.site-logo {
    max-width:100%!important;
}

.entry-content.cf img {
    max-width:100%!important;
}
}
    

		
	
    


    

			
				

    

	
    

		March 26, 2018 at 8:48 am

		
		#423317

		
		
		
	
    


    


    

	
    

		
		
    adyp
    Expired Member
    
		
		
     Post count: 496
    
	
    

	
    

		
		
    Thanks Kor,
    

    that’s worked great!
    

    Adrian
    

		
	
    


    

			
				

    

	
    

		March 26, 2018 at 12:14 pm

		
		#423351

		
		
		
	
    


    


    

	
    

		
		
    Alex Rollin
    Moderator
    
		
		
     Post count: 27815
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		March 26, 2018 at 2:07 pm

		
		#423379

		
		
		
	
    


    


    

	
    

		
		
    adyp
    Expired Member
    
		
		
     Post count: 496
    
	
    

	
    

		
		
    … ah, I just noticed a ‘glitch’: when the home page is opened up with phone vertical and then twisted to horizontal view the home content image remains squished in horizontal format. If the home page is opened when the phone is already horizontal the image opens up proper width and then switches back and forth between formats when the phone is twisted.
    

    Since most people might open the page initially with phone in vertical format, is there any way of tweaking the code so that the format of the image changes appropriately when the site first loads in vertical format?
    

		
	
    


    

			
				

    

	
    

		March 26, 2018 at 2:27 pm

		
		#423395

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi adyp, 
    

    Thanks for your reply. Try replacing the code with the below and see if it looks better. It fixes the height issue that causes the stretch. 
    

    

    @media only screen and (max-width: 600px) {
   .site-logo img {
    max-width:100%!important;
}

.site-logo {
    max-width:100%!important;
}

.entry-content.cf img {
    max-width:100%!important;
    height: 100%!important;
}
}
    

		
	
    


    

			
				

    

	
    

		March 26, 2018 at 2:42 pm

		
		#423407

		
		
		
	
    


    


    

	
    

		
		
    adyp
    Expired Member
    
		
		
     Post count: 496
    
	
    

	
    

		
		
    Hi Kor,
    

    that stopped the image looking ‘squished’ when phone in vertical, but twisting phone to horizontal the image stayed same (small) size. Loading while phone horizontal the picture is full width and switches fine when phone twisted.
    

		
	
    


    

			
				

    

	
    

		March 26, 2018 at 4:13 pm

		
		#423442

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi adyp,
    

    Thanks for your reply. I’ve just tested it on my iPhone 6 plus and the attached is how it looks like. Did you clear your browser cache? 
    

		
	
    


    

			
				

    

	
    

		March 26, 2018 at 4:30 pm

		
		#423449

		
		
		
	
    


    


    

	
    

		
		
    adyp
    Expired Member
    
		
		
     Post count: 496
    
	
    

	
    

		
		
    I can’t find how to clear my browser cache on my ununtu phone (!) so I will try onmy partner’s phone later – she has a bog-standard smartphone.
    

    Thanks for your help Kor.
    

    Adrian
    

		
	
    


    

			
				

    

	
    

		March 26, 2018 at 4:44 pm

		
		#423457

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Adrian, 
    

    Alright. Let us know how it goes. 
    

    Thanks!
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


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


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket