- This topic has 8 replies, 2 voices, and was last updated 3 years, 10 months ago by David.
-
AuthorPosts
-
May 4, 2020 at 1:42 am #1268350Megan
Hi team!
I have successfully removed the left and right sidebars from showing up on my site on devices up to 1200 px. I believe I worked out that this is the required break point for removing it on an iPad mini.
However, now that the sidebars have been removed, there is a blank space where the sidebar was, and I would like to have the content container snap to a full width, as it automatically does on a phone. I would need this for both pages, which utilize the left sidebar, and posts, which utilize the right sidebar.
Here is an image to illustrate the problem (image is of a post which is set up as content / right sidebar, but the same is an issue for pages I have set to left sidebar / content): https://www.solofemaletravelers.club/wp-content/uploads/2020/05/95982758_679124952665074_2807408735989792768_n-scaled.jpg
While I have achieved getting rid of the sidebars with my own CSS, I haven’t managed to achieve making the container automatically full width for devices up to 1200 px.
I hope that makes sense!
Thankyou!
May 4, 2020 at 4:44 am #1268570DavidStaffCustomer SupportHi there,
within your CSS media query that is removing the sidebar include this CSS rule:
#primary { width: 100%; float: none; }
May 4, 2020 at 7:03 am #1268766MeganThat’s working perfectly with the right hand sidebar (thankyou!), though doesn’t seem to be making a difference to the left sidebar. I’m wondering if it’s because I’ve got the following CSS in to dictate a specific positioning of the left sidebar, and notably also have positioning directives in place for the width of page-id-13817 (this page is the only page which displays a left hand sidebar, and it’s perfect on both phone and desktop, but I can’t for the life of me get the width on an ipad to snap into place like the smaller screen of a phone).
This is the CSS I’ve got running right now, I don’t know if it’s easy to spot why the left-sidebar command might now be working?
I really appreciate your help, thankyou in advance!
@media (min-width: 990px) {
#left-sidebar {
position: -webkit-sticky;
position: sticky;
top: 14%;
margin-left: -75%;
margin-bottom: 400px;
width: 217px;
margin-right: 0px; }
}
.page-id-13817 .container {
max-width: 95%;
margin-left: 0%;
}
@media (max-width: 1200px) {
.page-id-13817 .container {
max-width: 100%;
}
@media (max-width: 1200px) {
#left-sidebar {
display: none;
}
#primary {
width: 100%;
float: none;
}
}
@media (max-width: 1200px) {
#right-sidebar {
display: none;
}
#primary {
width: 102%;
float: none;
}
}May 4, 2020 at 7:05 am #1268768MeganTypo in this line, should be ‘might *not* be working’
“This is the CSS I’ve got running right now, I don’t know if it’s easy to spot why the left-sidebar command might *not* be working?”
May 4, 2020 at 8:34 am #1269109DavidStaffCustomer SupportYou have several of the same 1200px media queries – the first of which is missing a closing bracket. You can combine them all into however, so try replacing your CSS with:
@media (min-width: 990px) { #left-sidebar { position: -webkit-sticky; position: sticky; top: 14%; margin-left: -75%; margin-bottom: 400px; width: 217px; margin-right: 0px; } } .page-id-13817 .container { max-width: 95%; margin-left: 0%; } @media (max-width: 1200px) { .page-id-13817 .container { max-width: 100%; } #left-sidebar, #right-sidebar { display: none; } #primary { width: 100%; float: none; left: unset; right: unset; } }
May 4, 2020 at 7:09 pm #1269779MeganThankyou for cleaning the CSS up for me (I’m slowly learning)! Unfortunately it still hasn’t solved the issue with the page featuring the left sidebar and the blank space on the 1200 px sized devices. What I have realized though is that while the page container is showing up as 100%, the alignment of the page is way off. You can see what I mean in these screenshots:
What you see when the page originally loads: https://www.solofemaletravelers.club/wp-content/uploads/2020/05/95362861_537322380508766_4439940743095648256_n.jpg
What you see when you swipe the device left: https://www.solofemaletravelers.club/wp-content/uploads/2020/05/96413238_658499451364832_5729804900523573248_n.jpg
Is there any overriding CSS which could essentially just make a command that for any device up to 1200 px, act in exactly the same way you would act for a phone? The phone and desktop version are perfect, though devices inbetween are caught in a weird limbo.
I’ve just noticed too that columns don’t seem to be responsive within the theme on an ipad either, while a phone stacks them beautifully one on top of the other, medium devices stack them quite haphazardly. So if there was a command that could adjust the breakpoint up to 1200 px to mirror the responsiveness of a phone, that might solve all problems?
Thankyou! 🙂
May 5, 2020 at 2:30 am #1270106DavidStaffCustomer SupportI updated the code here
May 5, 2020 at 6:18 am #1270399MeganPerfect! That’s done the trick, thankyou 🙂
Truly appreciate your help 🙂
May 5, 2020 at 6:52 am #1270454DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.