Logo not translating to mobile

  • Unknown's avatar
    toddenglishenterprises · Member ·

    Hello!

    I am using the infoway theme – I used some custom CSS to get the logo small enough to fit in the header, however its not translating to mobile even though it’s checked to “use this CSS on mobile theme”

    Any suggestions? Thanks so much!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    The Infoway theme description is here http://theme.wordpress.com/themes/infoway/

    Infoway is a premium theme part of what you purchased is support direct from the theme’s designer. The person with the username account who purchased the theme can post to the Premium Theme Support forum for the theme to get help with it http://premium-themes.forums.wordpress.com/forum/infoway in the Premium Theme Support forum.

    If you think this would be better dealt with in the CSS Forum please let me know.

  • Unknown's avatar
    designsimply · Member ·

    What’s happening is that media queries are being used by the theme to apply different CSS to different screen widths to adjust the site for mobile devices automatically. This is called responsive design. The CSS in the media queries are more specific rules than your current custom CSS and that’s why the CSS you added didn’t take effect on mobile. You need to apply specific enough CSS (i.e. media queries in this case) to adjust the mobile views in a responsive design theme.

    If you’re interested in learning more about media queries, you might consider starting with a tutorial like this one:
    http://www.htmldog.com/guides/css/advanced/mediaqueries/

    I worked on an example, and I’m posting it here as something you can start with. You should experiment with making the width of your browser smaller and testing this CSS to see how it affects different browser widths. You can adjust the properties and values in the CSS to experiment with it:

    @media only screen and (min-width: 480px) and (max-width: 767px) {
	.header .logo {
		margin: 0 !important;
	}
	.header .contactinfo {
		float: right !important;
		width: 270px !important;
		text-align: center;
		margin: 0;
		padding: 0;
	}
}
@media only screen and (max-width: 480px) {
	.header .contactinfo {
		width: 180px !important;
		float: right !important;
		margin: 0;
		padding: 0;
	}
	.header .contactinfo span.calldetails {
		font-size: 12px !important;
	}
}
  • The topic ‘Logo not translating to mobile’ is closed to new replies.