Need help? Check out our Support site, then


Blog no longer responsive/scale to fit window

  1. Hi all,

    Sorry I'm not that good with the technical terms. I tried to change some of the basic CSS in my Highwind theme blog (mostly to extend the space for the content and to reduce the size of the side-bar and create my own not so brilliant version of a faux column) but with all these changes, the blog now no longer scales/displays proportionally to the window browser size.

    This means that unless viewed in full screen, content is cut off and there is no bottom scroll function to view across.

    The mobile version still appears to work well.

    Any suggestions are greatly appreciated. Thank you.

    The blog I need help with is destinationlyon.com.

  2. I don't assist with CSS editing. Someone else will help with it. Read this please:

    May I remove credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?
    All WordPress.com bloggers are required to maintain the credit links, even our VIP bloggers. Please do not hide or alter text or links for the footer credits or the toolbar. Modifying the style of the footer text (i.e. colors and font size) is fine as long as it’s still readable. http://en.support.wordpress.com/custom-design/#frequently-asked-questions

  3. Hi,

    I'm a little confused about why you asked me to read this. The footer text featuring wordpress and the credit to the creator of Highwind are both still visible. I simply added my copyright message (for the site content) to the footer. I thought that is was acceptable??

    I know that there is a bit of a gap between the footer and the content - the problem was - I was trying to get the sidebar to sit flush with the footer for all articles. I read a lot about doing this via faux columns but I wasn't experienced enough to do it. So I just extended the padding of my footer by an arbitrary amount (4000px I think) so that when lots of info was displayed there would not be a gap between the sidebar and footer.

    If this is not allowed then I'll have to change it back and ask someone to help me out with doing the faux columns properly.

  4. Oops! No you did that correctly. I'm sorry. I was looking at the wrong blog because I was searching Highwind threads for you and I had too many threads open at the same time. I apologize. :(

  5. No probs - don't want to break the rules.

  6. Hi again,

    I think you did a good job with the CSS. The one thing you missed when dealing with responsive layout: if you want to make things bigger, make sure it only apply on bigger screen (so the styling for smaller screens does not get affected).

    You do that by using media queries.

    Here I've taken your current Custom CSS and modified it a bit by adding a media query for bigger screen. Try it out:

    .header {
    	padding-bottom: 0
    }
    
    .footer:after {
    	padding-left: 220px;
    	padding-right: 220px;
    	text-align: justify;
    	content: "Inspiration-Only Notice: unless otherwise stated, all of the content featured on this website has been created by yours truly in collaboration with a talented team of artists. Please respect their work and your own creativity. Always be original. © 2013-2014 Destination Lyon All Rights Reserved."
    }
    
    .back-to-top {
    	display: none !important
    }
    
    /*
     * Responsive styling:
     * Make layout bigger only on bigger screens
     */
    @media only screen and (min-width: 1300px) {
        .content-wrapper {
            width: 1300px
        }
    
        #secondary {
            margin-right: 2pt;
            width: 300px;
            padding-bottom: 3500px
        }
    
        .site-title {
            margin-left: -180px
        }
    
        .site-description {
            margin-left: -180px
        }
    
        .content-wrapper .tiled-gallery {
            padding-left: 70px
        }
    
        .site-main {
            margin-left: -45pt
        }
    }
  7. Thanks for your reply. No this didn't seem to work. Perhaps I should have changed the CSS to percentages rather than pixels so that it would be responsive??

    Any other suggestions?

  8. Although I just realised that I'm designing the site on a laptop 13inch - so perhaps all the widths/proportions that I've chosen because they look good would not work on a bigger display?

    Basically, forgetting about the technical terms for everything. I just wanted to tweak the highwind theme so that the sidebar did not take up 1/2 the page and so that the main content began closer to the edge of the web page. In trying to achieve this, a whole bunch of other stuff got thrown out (i.e. position of the header title) so I just adjusted these visually in terms of no# of pixels so that they would be centered.

    Again, all help appreciated. Sorry I'm a real beginner.

  9. My edit above only works for screen with 1300px width and more. Not sure how wide your laptop is, but it probably doesn't apply there.

    Nevertheless, the CSS should fix the non-responsive issue you've been having.

    Now let me try to understand what you're trying to do.

    I just wanted to tweak the highwind theme so that the sidebar did not take up 1/2 the page and so that the main content began closer to the edge of the web page.

    With the above, do you want to:

    1. Make the sidebar width smaller, and
    2. Put the content area closer to the left edge?
  10. Yes I think it did fix the non-responsiveness - but it simply went back to the proportions of the old display. Not sure if on a larger screen it displays with the other proportions.

    Yep that's pretty much all I wanted to do, and perhaps:
    3. make footer flush with side-bar

    the problem was when I changed the sidebar to make it narrower there is this grey - thing that I can't identify with firebug that I can't get rid of. I think it is part of the main content? and the sidebar simply moves away from the right margin leaving a gap, rather than shifting from the centre to the right of the page as I want.

    I'll change the code so you can see what I mean, I'm not great at explaining this.

  11. Alright, let me know when you're done changing the code.

  12. yep it's done now - so you should be able to see that for some reason the sidebar displays with a gap when you try to make it smaller?

    argh i'm tempted to revert to the original settings, even though the sidebar seems ridiculously large and there is a lot of wasted space.

  13. Yep, I can see the sidebar issue.

    Let's do this step-by-step for now. Here's the CSS code to left-align everything, so instead of centered, the site contents now sticks to the left:

    .inner-wrap,
    .main-nav .highwind-navigation {
        margin-left: 0;
    }
    
    /* Left align the site title and description */
    .site-intro .site-title, .site-intro .site-description {
    	text-align: left;
    }

    Is this the effect you want? If yes, I'll continue working on the sidebar area. When I decrease the sidebar width, do you want to reclaim that space and add it to the main blog area's width?

  14. I think that actually made it worse. No I like the title and site intro centred, its just the main content that I want to move closer to the left margin - and the sidebar I would like to move closer to the right (and make less wide) so that the content part of the side is wider.

  15. Okay, how about something like this:

    @media only screen and (min-width: 1200px) {
        .inner-wrap {
            max-width: 1200px;
        }
        #primary {
            width: 68%;
        }
        #secondary {
            width: 20%;
            box-shadow: none;
        }
    }

    It widens the main content area and shrinks the sidebar area.

  16. Thank you. I have entered your code and changed it a little. It's almost exactly what I want. Is there anyway to shift the sidebar all the way across to the right margin (i.e. - to fill up that gap) keeping it the same width. I assume this will mean that there is also more room for content.

    The box seems to come back when you shrink the page to a certain point - just before it displays as it does on a mobile phone with the side bar taking up the full screen.

  17. I have but the "box" code back in and this seems to work well with the rest of the code that you have me. Thanks very much for all of your help.

Topic Closed

This topic has been closed to new replies.

About this Topic