1st January 18, 10:46 PM
Join Date: Jan 2018
Location: New York
Hello. I am a part-time webmaster for a non-profit with beginner skills. I could use help with the following. I am creating a banner headline that has 3 elements, an image, a block of text, and another image. In my style sheet the header container, within which all 3 should fit, has among other attributes
My issue has to do with making the header work on different devices. My desktop (Windows 7) has a screensize of 1280 x 1024. I have no issues with the first two elements, but to have the 3rd element (2nd image) fit on the same level as the first two elements and within the header container I set the class for the 3rd element to have
I arrived at the 150 by trial and error because I frankly don't understand where the right boundary is precisely or how to justify to it. With an attribute of "right: 0px" the 3rd element falls outside the header. The right 150 brings the image within the header container desktop and it all works great with Chrome, Firefox and IE 11. However if I then look at the header on my iPad or a phone the 3rd element image has shifted too far to the left, well left of the header's right boundary. Before I tried to add the 3rd element the header sized perfectly well on the ipad or phone.
Surely there is a way to have the 3rd image placed so that it is right adjusted to the right boundary of the header container so it is seen there on any device?
Here is the web site in question ==> http://www.usps.org/norwalk/
Thanks in advance for any help.