- This topic has 14 replies, 4 voices, and was last updated 11 years, 1 month ago by
.
-
Posts
-
I set up a site for a client http://www.newautism.com/ and they have let me know that the header is being cut off on the right side when viewing the site from a smart phone. How can I get the full header to display?
DAWN
http://www.newautism.com/You could add
background-size: contain;to #header in your stylesheet; however, since you've specified a height for the header, it will likely start repeating itself vertically. I would suggest the Genesis Responsive Header plugin (though I don't know if it has been updated for HTML5 themes): http://designsbynickthegeek.com/plugins/genesis-responsive-header
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+Thanks nutsandbolts. I added the code you suggested which does allow the full header to display on a mobile but like you said, it does repeat vertically. I also added the responsive header plugin but it doesn't seem to be working on the site. Any other suggestions? Can I add some special code for mobiles to define the header differently?
Try this change in .site-header. Do not use background-image, just background otherwise no-repeat will not work.
background: url(http://www.newautism.com/wp-content/uploads/2013/10/new_autism_header_small.png) no-repeat !important;
This will fix your responsive problem but in any case your header is not clickable.
Ideally you should have just used the logo and put the text in the h1 tag.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOK, that does work so that the image doesn't repeat, but the header has a big space below it because of the height. Is there a way to fix that? I just don't like the way the site looks on a mobile. I thought the new Lifestyle theme was mobile friendly???
Remove the !important from the image url it is not working in Chrome. You can add max-height to your media queries and play around with the size to get the result you want.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOK, I removed the !important. But I am not sure what you mean about media queries. Do you know the specific code I need to add and where? Forgive me, I am still a novice when it comes to coding.
Media queries are what makes your site change how it works when the browser size is reduced or someone is viewing with a mobile device. You can view this without using a mobile device and just reducing the width of the browser window. They are at the bottom of your css file. You should use a web inspector so that you can try out different measurements before committing them to the css file.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comThanks for the explanation., Do you have any specific suggestions for me on what code (in the media section) I should update or change so that the header will look right on a mobile?
Try this tutorial:
http://thepixelista.com/responsive-genesis-child-theme-logo/Is it possible for the site (on a mobile) to look just like it does on a regular computer instead? How do I turn off the responsive thing?
Does anyone know how to turn off the responsive thing for the new Lifestyle theme so that the site shows up on mobile just like it does on a regular computer?
You can remove the media queries section and all the style rules under it from your stylesheet, which will keep the site from resizing for phones and tablets. However, I would caution against it since it creates a very unpleasant experience for mobile visitors.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+
- The forum ‘General Discussion’ is closed to new topics and replies.