Link to home
Start Free TrialLog in
Avatar of Alex E.
Alex E.

asked on

Bootstrap with media queries and moving an image with CSS

Hello I want to use media queries to move an image. For example in these range of media queries:

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

Open in new window


For each query I want to move an image if possible via CSS. For example if browser resolution apply for first media query 320px min has CSS a left position the of the image if browser is resized to query 480px then the object has a new left position in other words must move to left in a percent or pixels and in that way for all queries. For each resolution reached the object needs to move to the left dynamically and each query is like a PIN for the new left position. I don't know what is the best way to move dynamically to the left the object while the queries are reached. Or if there is a better way to do is ok. If you can give me tips but if you can put examp,e of codes would be great.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Make the default the smallest width.

Then modify for each width going up from that
default style here
@media (min-width: 480px) {
   override for 480
}
@media (min-width: 768px) {
  override for 768
}

Open in new window


To be more specific would need to see your HTML.
ASKER CERTIFIED SOLUTION
Avatar of Alex E.
Alex E.

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
JavaScript can work but it should only be a fallback solution when a CSS solution is not possible.

Without seeing your HTML it is not possible to make a recommendtaion.
Avatar of Alex E.
Alex E.

ASKER

Solved in JavaScript