Adjusting Post Slider Margins on Homepage Oxygen Theme
-
Hi there,
I’ve widened my left sidebar in order to make all the social media buttons fit in one line side by side. I’ve managed to move the left margin on all my content and homepage, with the exception of the thumbnail images under the slider. No matter what I try, they won’t move. I know I’m likely not using the right code. Here is the code I used:
.home #content { margin-left:5%; } .home #featured-content { margin-left:5%; } .home #featured-post img { margin-left:5%; }The first two worked like a charm to move the content and post slider over, but the 3rd one is not working and the thumbnail images are still where they have always been…again, I know it’s probably the wrong code, but I’m still learning and trying things out. So, now my sidebar is being bounced to the bottom of the page on a tablet (it appears normally on a laptop).
Any advice would be great.
Thanks!
NissrineThe blog I need help with is: (visible only to logged in users)
-
Hi Nissrine, add the following to lessen the width of the slider below the featured image.
.featured-wrapper { width: 95%; float: right; }I also noticed that the right side of your featured posts in the featured slider are getting cut off. With the above change, remove the following from your custom CSS and it will correct that issue.
.home #featured-content { margin-left:5%; } -
Thanks so much thesacredpath! the issue I’m having now is that when I apply these changes, they don’t all fit on the screen properly in portrait view on a tablet. So while it looks great on a browser, on the iPad for instance, the sidebar is being moved down to below the content. Is there a way to fix this?
Also, on the pages, there is a huge white space between the sidebar and where the post starts, but when I adjust the margins, the text moves over, but the images stay where they are and then it looks funny because they are not all left aligned as I’d like them to be. Is there a way to fix that?
-
oh, and off topic, but I thought I would add it here instead of starting a new thread if that’s ok. Could you help me remove the bullets and left justify the recent posts in the sidebar? I tried the following to no avail:
`#recent-posts-3 a {
list-style:none;
font-size: 80%;
} -
-
Me again…working away on this CSS stuff and all of the sudden, my left sidebar disappeared from my homepage and my post pages. Then all of the sudden it reappeared on the homepage, but it’s still not on the post pages. I know I didn’t add css for any of this to happen, so how is this possible and how do I get it back permanently on the post pages?
-
In responsive width themes, the sidebars will move down below the content when the content (post/page) area becomes too narrow. The sidebars move to the bottom so that the content, which is the most important will be as clear and readable as possible on smaller devices.
At 768px (iPad portrait width) the sidebars are still present, but below 768 is when the move below the content and the content goes full-width.
What is the resolution of your tablet in portrait mode?
On the pages, can you point me to a page with this issue? On single post pages, you have hidden the sidebar, but you have not recovered that space for the posts. If you change the left margin value to 0, it recovers that space for the post content. Your image on that page though, is center aligned. If you want it left aligned (with the text wrapping around the right of the image, edit the page, click on the image and then click the edit button and change the alignment to left.
If you wish the image left aligned, but do not want the text to wrap around it, set the image alignment to none.
-
For the recent posts widget, add the following to get rid of the bullet and left align the text.
.widget ul { list-style: none outside none; margin-left: 0; } -
On the sidebar issue to bring the sidebar back on single post pages, remove the following from your custom CSS.
.single #tertiary { display: none; }I’m still trying to work out what is causing the sidebar to sit at the bottom.
-
Thanks so much, very helpful as always.
There’s still one big issue though. The CSS you mention above has to do with the RiGHT sidebar, which I’ve intentionally hid from the post pages. What I didn’t hide, is the LEFT sidebar. I want the LEFT sidebar to appear on the post pages, but it has vanished without rhyme or reasons, or so it seems to me. I didn’t add any CSS to remove it from post pages. It was there one minute, gone the next and I can’t figure out why or how to get it back. Any thoughts?
-
The other thing that happened without my deliberate intervention is that the previous post and next post links are now appearing one on above the other at the bottom of the post pages, instead of to the right and left of the post text, as before, and the reply/comments section has expanded to the full width of the page. It’s very strange. I’m new to CSS and maybe I’m missing something but I’ve read the custom CSS over and over trying to figure out what could have caused this and the left side bar to disappear, but i can’t see anything.
-
Ok so I figured out that some wonky HTML code in my after post widget was causing the left sidebar to go missing. Once I fixed it, it magically reappeared. Phewwww!
Thanks for all the rest sacred path. I’m sure you’ll be hearing from me again soon, with more CSS dilemma’s.
-
You are welcome, and I sometimes forget that wonky HTML can cause sidebars to misbehave. There has been a lot of work done by our developers to keep that from happening, but sometimes it can still happen.
- The topic ‘Adjusting Post Slider Margins on Homepage Oxygen Theme’ is closed to new replies.
WordPress.com Forums 