Jump to content
ZorroX

Responsive image inside div

Recommended Posts

I want to put a small shop image into my div box which is top of the side bar. The problem is after I set margin, height etc. it is not responsive like the rest of my site and its dissapear after i change windows size. I've created two divs one inside another to fit my 1300px container div width. 

Przechwytywanie.PNG

Edited by ZorroX

Share this post


Link to post
Share on other sites

If you have a problem with your car, would you show the mechanics only a picture of the car or bring them the car so they can inspect it and identify the problem.

  • Like 1

Share this post


Link to post
Share on other sites

Here I am changing the size of my web page holding mouse button and drag right side to the left. This small black shop icon is starting to hide on the right side. Grey div box element is responsive like the menu elements below but not this little image.

Webp.net-gifmaker.gif

Css commands used:

height: 20px;
width: 20px;
display: box;
 margin: 5px 5px 0 1200px;

Edited by ZorroX

Share this post


Link to post
Share on other sites

Obviously the left fixed margin length of 1200px will push it out beyond the boundary of browser window when its width starts getting below: 1200px, so you will have to try alternative to using this massive left margin. Again! image is useless in determining to html structure and styling used, its basically gone from a image to a video being supplied to a mechanic to fix a problem.

Supply code html/css or a link to this page is a much better option than a image.

  • Like 1

Share this post


Link to post
Share on other sites

To be responsive, you shouldn't us a fixed width using px, unless you use media queries to adjust width and html content structure as the device increases or decreases. You are using max-width: on wrapper div, which makes this element responsive up to a specific max-width. Most responsive sites use percentages widths for inner html structure within the fixed width container element, these also will use media queries to change from 3 to 2 to a 1 single column structure for mobile devices. Once this responsive page is working as it should, you can then think about adding all the other features like shopping cart images etc.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×