Moving Sidebar Next to Slider and More

Hi,

So I can fix your number 3:

.widget {
  font-size: 1.2rem;
  line-height: 1.66667em;
<strong>  margin-top: -30px;</strong>
}

The negative margin brings the widget up nicely.

As for the responsiveness, your theme appears to be based off of percentages at first? This could pose a pretty big problem for it’s responsive handling. I would recommend building three media queries in your child style.css and make it look pretty for mobile, tablet, and computer.

And please make sure this is being done in a child theme? First update and it may all go to pot (true story, I know).

Hi Josiah,

Thanks for your help! Unfortunately, when I tried adding the negative margin-top it doesn’t appear anything has changed. I tried on firefox and chrome and cleared my cache. Not sure why it didn’t move.

As for the responsiveness, building 3 media queries, I think I understand, but I’ll have to research that much more. So 1 query would be for the desktop computer, 1 different query would be for the mobile, and the 3rd query would be a different one for the tablet? Did I understand that correctly?

Yes, I am only working from a child theme, although most of my child theme has been copying parts of the parent into the child folder and then editing until I can make it change how I want!

I’m just not familiar with responsive coding at all. The only way I could make the sidebar sit next to the slider was to make the width of the feature super wrapper smaller and make the side bar an absolute to move it up.

By doing this, it definitely messed up the responsive settings and when I first viewed it on a mobile device everything seemed somewhat ok, except the wrapper width didn’t change, making the content very narrow and the slider very wide therefore not very pretty!

Thanks again for your help and any further advice would be greatly appreciated!

Ok, try this. I stole this from your child theme:

.widget {
  border-top: medium none;
  font-size: 1.2rem;
  line-height: 1.66667em;
  margin: <strong>0em </strong>0em 1.66667em;
  overflow: hidden;
  padding: 1.66667em 0 0;
}

I think a -3em will work on the bold. It’s working in my browser when I edit it.

Yes your are correct on media queries. so say your doing a phone and you set your max-width for that media query to 480px, table 720px, etc. You can find tons of tutorials online on media queries.

Percentages are usually a little bit easier to manage with media queries but then it’s more of a challenge to exact positioning.
I hope that helps.

Well. I don’t like the way that code posted. here you go:

.widget {
border-top: medium none;
font-size: 1.2rem;
line-height: 1.66667em;
margin: 0em 0em 1.66667em;
overflow: hidden;
padding: 1.66667em 0 0;
}

hopefully that makes sense.

So strange, I’m not sure why it’s not working. I replaced your above code with the code that was already there for .widget{} and nothing different.

Should it be margin-top: 0em 0em 1.66667em; ?

Do I need to write the words strong or bold in the code? I’m not sure how you got your second post to do the bold 0em but when I copied it, it didn’t stay bold.

This is the css for the media queries from the parent theme style.css:
https://pastebin.com/X1FV7r6K

I guess I’m just not sure if I should keep the feature wrapper the way I have it:

.featured-posts-super-wrapper {
position: relative;
width: 620px;
margin-top: 2em;
}

and the sidebar like this:
#secondary {
position: absolute;
top: 320px;
right: 100px;
float: right;
margin-top: 6em;
overflow: hidden;
width: 18.90243902%;
background: none;
z-index: 99999;
}

And then change the media queries each to their own separate thing?

So would the above code for the wrapper and sidebar be for the desktop version? And then the media queries get their own special code? The other weird thing it does is when the desktop browser is narrow the sidebar is shown over everything else.

I’m just wondering if even on desktop everything is messed up and if so what’s the right way to fix it?

Thanks so much for all your help! I know I’ve asked a lot of questions here!

Ok, phew! Just got the widgets to work with your suggestions!! Thanks so much!!

Now I just need to figure out about the media queries and see if it even makes sense the way I did the wrapper/sidebar combo.

I really almost gave up and tried using the Oxygen theme https://devpress.com/demo/oxygen/, but then had the same responsive problem when I tried to move the sidebar to the right instead of the left.

Although, eventually I will need to add the footer area somehow like Oxygen has too, so I’m wondering if I should just start all over.

Hi Josiah,

I don’t know that I’ve resolved this yet, but you’ve definitely me out a lot! I started working with the media queries and was definitely able to fix the size of the carousel slider. The only problem I’m still having lies in the positioning of the sidebar. Do you know how I can push it down below content in the media query? I have been searching that now, so if you have any suggestions, please let me know.

Thanks!
Beth

I’ve actually been doing great with cleaning up the media queries and even have it now set for portrait and landscape!

But my problem still remains that the sidebar widget is just always in the wrong place when I go to a different page (for mobile devices)!

– Is this something I should be setting up as a different template page or style in media query? I’ve seen forum posts about creating a different sidebar/widget for each page, but when searching for this with media queries I couldn’t find anything.

– Is there a different way I can get my sidebar widget area in the same place (sitting besides the slider) without it being absolute positioning – for desktop view? It seems that this is causing all the problems, because in doing this it’s messing up the elasticity and responsiveness.

Please, the client wants her site to go live and I don’t want to set her up until I know I have this correct.

Thanks again for any help!
Beth

Hi Beth,

Sorry, I’ve been out of town at conferences so that’s why I’m just now getting back to you.

On the media queries…I’m not 100% sure on the php for that as I’m not a php guru at all as I usually work with php in trial and error. But what I think we are going to have to do is add a php if else statement which basically says if it’s mobile size, then we need the structure to look like this and use a little mobile.php file that is structured how you want it to be on mobile.

I definitely could not write the code without just trial and error on that but I would recommend googling media queries in php and I think this little article will kind of give you an idea of what I’m talking about:

https://stackoverflow.com/questions/18360211/conditional-php-include-in-wp-using-media-queries-and-javascript

I hope that helps.

Hi Josh,

You’ve been extremely helpful! Thanks so much for getting back to me and no worries!! The delayed response just pushed me to keep trying! I ended up making the slider a percentage again which at least cleans up the desktop elasticity and make the absolute sidebar situation more tolerable.

As for the mobile, great, thanks for the direction. I’ll do some searching and see what I can figure out. I’ll let you know as I’m sure I’m going to have questions still!

Awesome thanks SO much again!!

Oops!! Sorry Josiah!! I just realized I wrote Josh by accident!! Long day! Thanks again!!

Hey Josiah, I did also just find another post in my searching and it seemed someone posted with a similar situation to mine. The suggestion given was this:

Have you considered maybe using css media queries and simply removing the position:fixed from the container only if device-width is smaller that ###px.
That way when you’re on a small device such as an iPhone or Android phone, you’ll loose the ability to have it follow you as you scroll down, but at least it wont overflow onto the regular content.

from this post:
https://forums.phpfreaks.com/topic/268610-small-screen-fixed-position-spilling-over-content/

Do you think that would work and do you understand what that means? Unfortunately I’m not totally following but seems like maybe a good suggestion to try, so I wanted to see if maybe you understand this. Since I have the sidebar positioned as absolute, how would i remove it for media query…

Anyway, I’ll keep searching your other suggestion too, but wanted to share what I found.

Thanks!

That may work but don’t quote me on that. In theory, it should make the sidebar relational to the main content and not formatted so that it’s stuck in one place. I’d recommend backing up first, but try it.

Josiah,

I really can’t thank you enough for the amazing direction you’ve given me! I did some further searching and found this link: https://csswizardry.com/2010/12/media-queries-handier-than-you-think/

which I then went to my media queries and changed the #secondary (my sidebar) to:

#secondary {
position: static;
width: auto;
}

…for both views (portrait and landscape) and this did the trick! It moved the sidebar to the bottom below the content and above the footer in the media view!

For the desktop view, I changed the slider width to percentages instead of pixels which allowed the page to have the elastic design again, so that when the screen is made smaller the sidebar moves below it and does not overlap. Elastic design is still a little strange to me, but I think I can live with all this.

Because of your help, I’ve completely cleaned up the media views and they look great!!!

So… I do still have some other things I could use some guidance on. Would I need to start a new post, ask them here, or contact you separately?

Thank you so much again!!
Beth

Would I need to start a new post, ask them here, or contact you separately?

Yes, please start a new thread for a new topic so other people can find and make use of the forums more easily.