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
In my customized child theme of twenty eleven, the sidebar is now pushed to the bottom. This behavior is in chrome, whereas it appears fine in firefox. Earlier, all alignments would look good in chrome.
preliminary changes on #primary, #secondary did not help.
Can someone please tell me how to fix this?
The blog I need help with is justhomemade.net.
Can you try removing this block of CSS from the "@media max-width 800px" section on your Appearance → Custom Design → CSS page and let me know if that fixes the problem for you?
iradpress
#main #content {
width: auto;
margin:0 7.6%;
}
#main #secondary {
float: none;
width:auto;
margin:0 7.6%;
}Designsimply,
It worked like a charm! Thanks a bunch..
Have another long nagging issue with the display on mobile and ipad.
In my child theme, have changed the banner width to 1200. Layout looks fine on ie, chrome and firefox on the laptop. However, same thing is all torn on mobile and ipad. Only the header is jutting out and the rest of the content is only half the width.
Please let me know how to fix it. It is such an eyesore of a display on the mobile devices!
Try replacing what you currently have for "#branding > a" CSS with this instead:
#branding > a {
display: block;
width:100%;
height:200px;
border-bottom:1px dashed #FAE8EF;
}
#branding {
background:url('http://justhomemade.files.wordpress.com/2012/10/jhm_banner_102012-12001.jpg') no-repeat;
background-size: contain;
}
@media (max-width: 800px) {
#branding > a {
height: 100px;
}
}
@media (max-width: 650px) {
#branding > a {
height: 90px;
}
}
@media (max-width: 480px) {
#branding > a {
height: 60px;
}
}Adjust the numbers to fit your image.
Designsimply, Thank you.
The banner is fixed, doesn't jut out anymore.
1) However, the background "burlap" image is not continuous, looks repeated. How to fix that?
2) Also, the heading fonts h1, h2, h3, h4 all of them look oversize on ipad. Don't know how to fix it.
3) Suddenly, h1 (entry title) does not look like the size it is set at. Tried changing it, no avail.
4) Is there a way to make the sidebar be present even for singular content?
Would totally appreciate your help
Hi! For the future, would you mind please adding each of those items as separate help requests at http://en.forums.wordpress.com/forum/css-customization/#postform ?
It would help me with organization and its also better for searching to keep separate questions in separate threads.
1) However, the background "burlap" image is not continuous, looks repeated. How to fix that?
This is a graphic design question. It's outside the scope of this support forum, but here is a link to get you started: https://www.google.com/search?q=how+to+create+seamless+patterns
This might also interest you—I'm not sure if this tool can import images, but it looks neat: http://www.colourlovers.com/seamless-studio
2) Also, the heading fonts h1, h2, h3, h4 all of them look oversize on ipad. Don't know how to fix it.
It looks like an intentional part of the theme design to me combined with how iPad interprets the font sizes in your custom CSS. You can try to adjust sizes separately for the iPad like this:
@media max-width 800px {
h1.entry-title,
h1.entry-title a,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
font-size: 1.2em !important;
}
}Change the 1.2em value to adjust the size. Note that you can break out each selector into separate rulesets if you want to use different sizes for each heading element.
3) Suddenly, h1 (entry title) does not look like the size it is set at. Tried changing it, no avail.
If you changed the font face or font size on the Appearance → Custom Design → Fonts page, then that rule tries to override everything else and you need to add "!important" to the end of your newer CSS rule to re-override it using custom CSS.
4) Is there a way to make the sidebar be present even for singular content?
Not in the case of Twenty Eleven using CSS because you can only use CSS to make adjustments to content that is already present on the page and the Twenty Eleven single posts don't load the sidebar at all. It's just how the theme was designed to work.
Designsimply,
Most certainly I shall take care of posting in the proper forums going forward.
Thank you for your response.
For (3) in my questions above, it was a problem only on google chrome, was fine on Firefox.
Problem fixed by changing this:
@media max-width 650px {
.entry-title {
font-size: 34px; (this was earlier 15px)
}
}
Will check out the seamless studio. Was looking for some shortcuts though.
Regarding the ipad appearance, looks like I'll need more help. It does not seem straight forward. Blog does not look the same on ipad. Many others blogs turn out just fine in proportion. Sidebars, You may also like, heading fonts all have gone disproportionate in mine. Will post a new thread on the forum.
Aha, interesting fix for #3. Note that something like that edit (making titles a fixed 34px) might just be the source of the different font sizes on iPad.
Will post a new thread on the forum.
Sounds excellent. Thank you!
This topic has been closed to new replies.
