Images move on smaller screen resolutions.

Started by Jeremy M., August 29, 2015, 05:19:09 AM

Previous topic - Next topic

Jeremy M.

(Image attached)

I am trying to put an image into the "gray" areas with a div. . . I can get it there with position:absolute, but the problem is when i test the page out on smaller resolutions, such as computers, phones and tablets, the image i place moves to the middle of the page. How can i get this to work?  I have tried everything I can think of.  i've even tried giving those div ids and editing the css page with position:absolute/fixed.






<div style="position: fixed; top:30px; left:460px; width:100px; height:25px"><img src="http://i1058.photobucket.com/albums/t406/StormChaser83/panamarazorbacks/PANAMAbanner.png"></div>


<div style="position: fixed; top:30px; right:445px; width:100px; height:25px"><img src="http://i1058.photobucket.com/albums/t406/StormChaser83/panamarazorbacks/RAZORBACKSbanner.png"></div>

Antechinus

Yeah, no drama. The trick with that is to have a wrapper div that holds all the stuff in the middle, plus your two new divs at the sides. Then don't worry about fixed positioning and all that. Just set an overall width on your wrapper, then set relevant widths on the three content divs inside the wrapper. These can be floated to make them sit side by side.

You'll probably still have width problems on small screens though, just because small screens don't have enough width to stick much stuff side by side. It's not normal to use columns on phones.

Jeremy M.

Quote from: Antechinus on August 29, 2015, 09:21:12 AM
Yeah, no drama. The trick with that is to have a wrapper div that holds all the stuff in the middle, plus your two new divs at the sides. Then don't worry about fixed positioning and all that. Just set an overall width on your wrapper, then set relevant widths on the three content divs inside the wrapper. These can be floated to make them sit side by side.

You'll probably still have width problems on small screens though, just because small screens don't have enough width to stick much stuff side by side. It's not normal to use columns on phones.


I'm not even quite sure how to start a wrapper. . lol

Jeremy M.

Quote from: Antechinus on August 29, 2015, 09:21:12 AM
Yeah, no drama. The trick with that is to have a wrapper div that holds all the stuff in the middle, plus your two new divs at the sides. Then don't worry about fixed positioning and all that. Just set an overall width on your wrapper, then set relevant widths on the three content divs inside the wrapper. These can be floated to make them sit side by side.

You'll probably still have width problems on small screens though, just because small screens don't have enough width to stick much stuff side by side. It's not normal to use columns on phones.


Can you point me to the right direction?

Antechinus

It's a bit tricky without knowing what markup you are using now (link to the live site would help) but in essence it goes like this:

<div id="the_one_around_everything_else">
    <div id="the_one_on_the_left_on_desktop">stuff inside it</div>
    <div>all the stuff in the main forum</div>
    <div id="the_one_on_the_right_on_desktop">stuff inside that</div>
<div>


Then for CSS you could use:

#the_one_around_everything_else {width: whatever you like;}
#the_one_around_everything_else>div {width: 70%; box-sizing: border-box; float: left;}
#the_one_on_the_left_on_desktop, #the_one_on_the_right_on_desktop {width: 15%;}


There are other ways of doing it, but that should work.

Advertisement: