WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I have Bouquet theme. The header I uploaded fits perfectly on my computer screen, but on my son's and husband's computers the header is cut off on the right side - in the middle of the last word. However, none of the body is cut off on their computers. Does anyone know why this is and how I can solve the problem? My link is: http://vegetariancookingforcarnivores.wordpress.com
Thanks!
The blog I need help with is vegetariancookingforcarnivores.wordpress.com.
Howdy,
What's the screen resolution on your son's and husband's computers? Can you take a screenshot from their computer, then upload it to your Media Library?
The likely reason is due to a lower resolution setting, where the Bouquet theme maximum width is 1100 pixels.
The reason why the body isn't "cut off" is due to the theme's responsive design.
Ahhh - I wondered if the body was responsive. It's too bad the header isn't responsive, too. Is the solution to make my header narrower. I shoved over my text to compensate for the cutting off which worked for my son's tiny screened laptop, but my husband is using an ipad and it still cuts of after the 'C' in Carnivores. My worry is the audience 'out there' who may be turned off by looking at a partial header if they're using an ipad.
Is there a code I can put into the header to make it responsive? Thanks.
Is there a code I can put into the header to make it responsive?
Absolutely. You'll need to edit the CSS to do this, which requires the Custom Design upgrade.
If you'd like us to help with this, please reply to this forum thread after purchasing the Custom Design upgrade from the Store in your dashboard, and I'll be happy to move this thread to the CSS Customization forum to help there. :-)
I purchased the Custom Design upgrade. Can you help me make my header responsive, please.
Thanks.
Sure! The header image in the Bouquet theme is setup using the CSS "background" property, and so it is something you can change.
The only caveat in this case is that the "background-size" property is CSS3 and so it's not supported in all older browsers, like IE 8. You can see this browser background compatibility chart:
http://www.quirksmode.org/css/background.html
In Appearance -> Custom Design -> CSS, you can add the following to your CSS Editor, then click Save Stylesheet, and it'll work in all up-to-date browsers (I've added comments for reference):
vegetariancookingforcarnivores
bryanvillarin/* for the responsive header image */
#branding {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 1140px) {
#branding, .header-link {
height: 120px;
}
}
@media (max-width: 860px) {
#branding, .header-link {
height: 100px;
}
}
@media (max-width: 650px) {
#branding, .header-link {
height: 80px;
}
}
@media (max-width: 450px) {
#branding, .header-link {
height: 60px;
}
}
/* removes border for the responsive header image */
#branding {
border:0;
box-shadow: none;
}I just want to be sure I understand before I do anything. When I went to 'CSS' this was already there:
#branding {
background-size:contain;
background-position:center;
}
@media (max-width: 650px) {
#branding,.header-link {
min-height:80px;
}
}
@media (max-width: 480px) {
#branding,.header-link {
min-height:60px;
}
}
Am I supposed to copy & paste the code you wrote after what's already there?
Am I supposed to copy & paste the code you wrote after what's already there?
Ah! You can delete what's there, then copy and paste what's above. :-)
It worked! Thank you so much. Don't you love coding?! It's so incredible!
You're welcome! I love how things work out like this. :-)
For the record, mfields and designsimply were a huge help, so major props to them.
Happy blogging!
This topic has been closed to new replies.
