Grow your CSS skills. Land your dream job.

Bootstrap pull question

  • # April 25, 2013 at 6:59 am

    I have a simple login form on the top right of my site using the ‘pull-right’ css. i want this form to align to the left on a mobile (when you resize down) – at the moment it’s still floating about on the right and looks wrong.

    any pro-tips?

    ta

    # April 25, 2013 at 7:10 am

    Do you have a link as the one in your post does not work?

    # April 25, 2013 at 7:11 am

    im trying to copy pasta code and it aint lettin me

    # April 25, 2013 at 7:12 am

    Depends a little bit on what you want to do?

    If you always want to have `.pull-right` be to the left when it’s smaller, add a rule along the lines of

    .pull-right {
    float: none;
    }

    within an appropriate media query.

    If you’re wanting just the login to not be floating to the right, find a decent selector that’s more specific than .pull-right and add the `float: none;` to that selector within the appropriate media query.

    I can’t give more details than that without seeing the code, unfortunately.

    # April 25, 2013 at 7:13 am




    login

    # April 25, 2013 at 7:33 am

    like so?

    .formLogin {
    margin: 0px 0 0 20px;
    display: block;
    border-bottom:1px dotted #f2f2f2;
    float: right;

    }

    @media screen and (min-width: 400px) and (max-width: 1000px) {
    .formLogin {
    float: none;
    }
    }

    # April 25, 2013 at 7:55 am

    Since you’re using the `.pull-right`-class, you don’t need to set float: right in `.formLogin`, but yes, that way.

    You may need to make the selector `.formLogin.pull-right`, but that’s as a final way, not the first attempt.

    # April 25, 2013 at 8:49 am

    cheers – seems to have done the trick

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".