Jump to content

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. 


Edited by ZorroX
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.


Css commands used:

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

Edited by ZorroX
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
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 2
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...