We help IT Professionals succeed at work.

Bootstrap with media queries and moving an image with CSS

Alex E.
Alex E. asked
on
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.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.
Commented:
I solved using JavaScript reading the screen resolution and after I make move movements in variables to then enter in document.getElementById elements and I have a smooth move after change of any resolution. Who knows if with CSS is possible but with JavaScript worked very good.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
Solved in JavaScript

Explore More ContentExplore courses, solutions, and other research materials related to this topic.