WordPress.org

Ready to get started?Download WordPress

Forums

Sundance
[resolved] Moving Sidebar Next to Slider and More (17 posts)

  1. bpd-graphics
    Member
    Posted 10 months ago #

    Hi, this is my first post ever, so bear with me here.

    I've learned html and css although it's been a little while since I've done any coding. I have been asked by a client to create a blog and I suggested wordpress because I knew I needed to learn it. Anyways, maybe not the best idea without practicing first, but I did it and now I'm feeling a bit stuck. I have made all of the customization to this with a child theme and it is wordpress.org.

    1. Moving the Sidebar Widgets next to the Slider
    I currently have her blog up on my site for now at:
    http://www.bethparrattdesign.com/
    I have it pretty much looking the way I want, but in order to get the sidebar next to the slider I made it absolute positioning which totally threw off the responsiveness of the theme. In order to fix this for mobile viewing I overrided the media settings in the css.

    2: Fixing the Responsiveness and Other Layout Issues
    Still, the border and background image (white) is all messed up when viewing on mobile sites as well as when I go to one of the categories which I don't have content to yet and it shows nothing found, then I do a search and it throws off the border/background: http://www.bethparrattdesign.com/?s=listings&submit=Search

    3. Other Tweaks Include the Spacing Top/Bottom of the Widget Categories
    How can I change the spacing top and bottom between the social media icons which are built into the theme but still connect to the sidebar, and the text widget I used to add the navigation flag buttons?

    I've searched for hours, days, weeks, and just feel stuck!

    I just want to make sure I have this working right before I get it all finalized for her.
    Please Help!!

    All of this is sample content and sample photos.

    Thank you!

  2. Josiah
    Member
    Posted 10 months ago #

    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).

  3. bpd-graphics
    Member
    Posted 10 months ago #

    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!

  4. Josiah
    Member
    Posted 10 months ago #

    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.

  5. Josiah
    Member
    Posted 10 months ago #

    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.

  6. bpd-graphics
    Member
    Posted 10 months ago #

    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:
    http://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!

  7. bpd-graphics
    Member
    Posted 10 months ago #

    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 http://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.

  8. bpd-graphics
    Member
    Posted 10 months ago #

    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

  9. bpd-graphics
    Member
    Posted 10 months ago #

    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

  10. Josiah
    Member
    Posted 10 months ago #

    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:

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

    I hope that helps.

  11. bpd-graphics
    Member
    Posted 10 months ago #

    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!!

  12. bpd-graphics
    Member
    Posted 10 months ago #

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

  13. bpd-graphics
    Member
    Posted 10 months ago #

    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:
    http://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!

  14. Josiah
    Member
    Posted 10 months ago #

    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.

  15. bpd-graphics
    Member
    Posted 10 months ago #

    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: http://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

  16. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    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.

  17. Josiah
    Member
    Posted 9 months ago #

    Please start a new post or check out my profile. Just let me know what you need. I'm glad I could help!

Reply

You must log in to post.

About this Theme

About this Topic