Thanks for your speedy response. After spending a day and a half trying to figure this out I worked it out almost immediately after posting my problem.
I had some padding values set in rem:
article.format-aside .entry-content {
padding-top: 5.714285714rem;
padding-bottom: 5.714285714rem;
padding-left: 10.714285714rem;
padding-right: 10.714285714rem;
}
.entry-content {
padding-top: 5.714285714rem;
padding-bottom: 5.714285714rem;
padding-left: 10.714285714rem;
padding-right: 10.714285714rem;
}
img.page {
padding-left: 10.714285714rem;
padding-right: 10.714285714rem;
}
which I have now changed to %:
article.format-aside .entry-content {
padding-top: 9%;
padding-bottom: 9%;
padding-left: 18%;
padding-right: 18%;
}
.entry-content {
padding-top: 9%;
padding-bottom: 9%;
padding-left: 18%;
padding-right: 18%;
}
img.page {
padding-left: 18%;
padding-right: 18%;
}
This solved the problem of my posts being pushed off the screen on smaller devices and images are now resizing accurately.
To workaround the problem of the sidebar showing I added:
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
#right.widget-area, #left.widget-area {
display: none !important;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
@media screen and (min-width: 320px) and (max-width:568px) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
@media screen and (min-width: 320px) and (max-width:480px) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
@media screen and (max-width:320px) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
@media screen and (min-width:240px) and (max-width:320px) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
@media screen and (max-width:240px) {
#right.widget-area, #left.widget-area {
display: none !important;
}
}
Following your code snippet here: http://www.themesandco.com/snippet/media-queries-responsiveness/
My site is in ‘coming soon mode’ and I don’t know how to send a link to what I’m working on behind this holding page
No problem if you’ve solved your issue! Great piece of diagnosis.
I find using %width is the best way of handling responsiveness.
@brooke_babington: Although what you have will work on many devices, it may give you unintended results on several. For example, what do you want the browser to do if your screen is 570px wide?
A few other points:
- You can choose any breakpoints with media queries. However, it’s best if you stick to the Customizr breakpoints, so that the screen doesn’t jump around too many times. Those breakpoints are:
@media (min-width: 1200px) {}
@media (max-width: 1200px) {}
@media (min-width: 980px) {}
@media (max-width: 979px) {}
@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 767px) {}
@media (min-width: 481px) and (max-width: 767px) {}
@media (max-width: 480px) {}
@media (max-width: 320px) {}
(min-width: 481px) and (max-width: 767px) is specified in Customizr code as (min-width: 480px)..., but I changed it to 481px so as not to conflict with (max-width: 480px). If you have a max-width: 480px rule and a min-width: 480px rule, then I think the last one will take precedence. So for flexibility in re-arranging your CSS file, it’s best to make them mutually-exclusive.
- Specifying 2 identical rules, with one for landscape and one for portrait is the same as having one rule without specifying the orientation— which you already have.
- There’s also other duplication in there.
(min-width:240px) and (max-width:320px) is already covered by (max-width:320px).
- The max-device-width vs max-width is an interesting one. The max-device-width is the maximum width that the device can display. Whereas the max-width is the maximum that the browser is currently showing.
You’re using them intelligently by removing your sidebars at 1024px on devices that cannot go beyond 1024px, but showing them on browsers currently at 1024px, but which could conceivably be stretched wider. However, don’t overestimate the ability of users to stretch windows. The first person I tested my site with didn’t know she could stretch the browser window (someone with a degree and an average understanding of technology)). Note also that some people work with reduced-width browser windows by choice. For example, my screen is 2560px wide, but unless I’m testing screen widths, I generally keep my browser window around 1000-1200px wide.
So you may want to consider what you want to do in these cases—use max-device-width or max-width. I stick to max-width everywhere (and don’t use max-device-width) because I want to be in control of what people are actually seeing, not what they could conceivably see if they were to stretch their browser window.
All in all, it looks like what you are trying to achieve is covered by two rules:
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#right.widget-area,
#left.widget-area {
display: none !important;
}
}
@media screen and (max-width: 767px) {
#right.widget-area,
#left.widget-area {
display: none !important;
}
}
And if you decide not to use max-device-width, you could bring it down to just one rule.
