Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive queries

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #149244
    billyryanwill
    Participant

    First post and it’s a confusing one on my end.
    Here’s my site: http://www.charcombeandwills.com

    I’ve tried to create a responsive site (and used a % based system) and am coming across 3 problems;

    1) The margin’s I’ve set seem to disintegrate into nothingness when reducing the browser width, causing the image to disappear into browser heaven.

    2) I’ve tried to use media queries to allow the image to only reduce to a certain size;

    @media only screen and (max-device-width:750px) {
    #wrapper{
    width:90%;
    margin-left: 5%;
    }
    #image{
    width:90%;
    min-width: 500px;
    margin-left:5%;
    }

    img{
        {
    position: absolute;
    max-width: 100%;
    min-width: 300px;
    max-height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    

    }
    }

    3) I would also like to keep the centering of the image when reducing the width of the page as well.

    I’m sure that this is relatively simple task (can it only be done using js?), funnily enough the effect I would like to achieve is similar to the login page for this website (https://css-tricks.com/wp-login.php).

    Thanks in advance,

    Billy

    #149249
    Paulie_D
    Member

    I’m on my phone at the moment but the absolute positioning of the image is a weird thing to do in my experience.

    I will look at the link when I get back to my desktop.

    #149256
    Eric Gregoire
    Participant

    There’s a jQuery technique you can use so the image stays in the middle vertically and horizontally. It uses jQuery to get the width and height of the image and set top and left margins equal to negative half of the image height and width when the window resizes. What this essentially does is move the absolute positioning reference point from the default top left corner to the center of the image and the positioning values at the top and left of 50% will center the image within the window. This should be included in a script that loads when the document is ready.

    I find this to be the most compatible way to center fluid-size images. CSS calc() can offer the same ability, but falls short in terms of browser compatibility.

    P.S. I would also recommend cropping the centered image right to the edges if you want it to be perfectly centered in the browser using this method.

    Here’s a pen :: http://codepen.io/Boogiesox/pen/rpLmJ

    #149258
    Paulie_D
    Member

    The first thing I would do is remove the text from the image and make it a proper part of the HTML.

    After all, it’s content not styling.

    Then crop it down to the basic size of the logo alone.

    #149262
    Paulie_D
    Member

    After that…it’s a “Coming soon” page….let’s not panic just yet…does it really need to be responsive?

    #149264
    billyryanwill
    Participant

    Sweet cheers for the help guys.

    And paulie just experimenting with it to see how feasible making my whole site responsive would be, it’s not the end of the world by any stretch of my imagination haha!

    #149266
    Paulie_D
    Member

    To be honest, you might want to start with a framework and see how that works for you.

    I’m not a fan of some of the overly heavy ones like Skeleton, Foundation or Bootstrap (all though the do have their benefits) but I read about a new one recently.

    You might want to check it out: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/build-a-freshly-squeezed-responsive-grid-system/

    #149275

    Can’t you use margin: auto ? Maybe i did not understand your request

    responsive centered image with min-width

    For vertical centering, I read the smashing magazine article (http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/) for pure CSS centering, but it has some cons.

    #149277
    Paulie_D
    Member

    I think the page probably need a good reset.css &/or normalize.css and, perhaps, a re-think of the structure.

    I wouldn’t even have put the logo image into the HTML, I would make it a bg image…after abstracting taking the actual content out into my page as mentioned above.

    Going forward, if responsiveness is important, then go mobile first.

    #149286
    billyryanwill
    Participant

    I’m pretty new to this so all these comments are really helpful.

    I’ve managed to make it work well enough for now (I replaced the image as suggested above and incorporated the text through html/css) and although not perfect it’s looking fine on desktop and tablets.

    That lemon framework looks pretty sweet so I’m going to investigate that as well (Y)

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.