Logo is small when viewed in mobile or tablet

  • Hey everyone!
    I am trying to get the logo on my website bigger when viewed in mobile and tablet and I have looked on here and nothing seems to be working. I’m using the theme Freesia Empire which is a free theme. I am hosted with siteground, not sure if that’s an issue. I’d also like to add that I have resized the image with photoshop. Its still not getting bigger. I was told it has something to do with the theme making it a certain size, or something of the sort.

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • It seems your theme’s header.php file has inline css added which is causing this issue. You may find below code in your header.php file.

    
/*logo center - not working*/
#site-logo, #site-branding {
    text-align: center;
    width: 50%;
}

    Inline css should not be added in our theme as this is not a standard way to add css in WordPress. For adding css that will be applicable for mobile version, we should create new css file and add media queries in that. You can also add below code in style.css file but it’s good to create new file for adding media queries.

    So your final code will go like : 

    
@media only screen and (min-width : 320px) and (max-width : 480px) {
	#site-logo,
	#site-branding {
		width: 100%;
	}
}

    above css will be applicable when mobile / screen resolution is between 320px and 480px.

    Thread Starter altosi

    (@altosi)

    sorry for the late reply. how do I create a new css file? do i just copy and paste the code above to a text editor and save it as .css?
    btw I tried adding the code to the custom css editor of the theme and it works so do i still need to make a new css file?

    • This reply was modified 5 years, 11 months ago by altosi.
    • This reply was modified 5 years, 11 months ago by altosi.

    It will do if you add this code in theme’s style.css file. That’s a recommendation to create new separate css file for mobile version.

    Thread Starter altosi

    (@altosi)

    how about for tablet devices? what will the code be like?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Logo is small when viewed in mobile or tablet’ is closed to new replies.