How to reposition photos for mobile screens

HTML-CSS
21

Go back one step. I have the background of the images, for a wide screen, made as follows:-

<style type="text/css"> .images { position: absolute; height: 77%; width: 39%; right: 2.5%; bottom: 6.8%; top: 16%; background-color: #98FF98; } </style>
	<div class="images"></div>

If I add the following and reduce the screen width the background repositions, just the way I want, and I want the photo to do the same.

<style>@media screen and (max-width:800px) { .images { position: absolute; height: 47%; width: 96%; left: 2%; top: 16%; background-color: #98FF98; } }</style>

This is the coding for the photo for a wide screen and everything works good:-

<style type="text/css"> .pha { position: absolute; width: 6%; right: 8.2%; top: 18.5%; } </style>
<div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:160%;" ></div>

But if I narrow the screen the photo is too small, so I have the next page for narrow screens, as follows:-

<style type="text/css"> .pha { position: absolute; width: 6%; left: 7.2%; top: 17%; } </style>
<div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:285%;" ></div>

So when the screen narrows I want the lower percentages to apply, either by CSS or Javascript. The only difference between those blocks of codings, or elements as you might call them, is the number % in other words right: 8.2%; changes to left: 7.2%; and top: 18.5%; changes to top: 17%; etc etc.

By the way my codings must be the same as yours otherwise nothing will work for me. My only difference is that I dont have the style code in the header and dont have an external sheet.

If you still dont understand, tomorrow Iā€™ll post the entire codings but only for the problem I have (not for the entire page otherwise there will be too much code), and try to post some screenshots.

22

Thatā€™s fine, but instead of asking us to interpret the things youā€™re describing, please try to do what @lasjorg asked and post the code to JSFiddle or CodePen ā€“ you keep repeating the same thing and I realise you know what you mean, but we donā€™t. If you post a live simplified working version of your code, then thatā€™s unambiguous, we donā€™t have to try to figure out what youā€™re trying to describe.

23

But for me to go into JSFiddle or CodePen Iā€™ll need time to learn that. Lets see tomorrow to see if you understand. My problem is that I dont know what you fellows dont know.

24

This is the answer:-

<style type="text/css"> .images { position: fixed; height: 77%; width: 39%; right: 2.5%; bottom: 6.8%; top: 16%; background-color: #98FF98; }</style>
	<div class="images"></div>
<style>@media screen and (max-width:700px) { .images { position: fixed; height: 47%; width: 96%; left: 2%; top: 16%; background-color: #98FF98; } }</style>

<style type="text/css"> .pha { position: fixed; width: 10%; right: 4.2%; top: 18.5%; } </style>
<style>@media screen and (max-width: 700px) { .pha { position: fixed; width: 15%; left: 4.2%; top: 17%; } } </style>
	<div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:100%;" ></div>

If anybody wants to use this coding, just change the percentages to get the position on the page, and change the photo name.

25

I am sorry to make a criticism again, but people are not going to use this, because itā€™s incredibly specific and a bizarrely complicated way of doing things. Iā€™m pleased you found a solution, but I would urge you to actually use CSS in a separate stylesheet at least: what you have here, if you use your technique for a full web page/app, requires enormous levels of manual duplication. And in needing that it pushes the chance of making coding errors pretty close to 100%. It will be almost impossible to debug anything even halfway complicated (ie any standard web page). I do realise it makes sense to you, but from an external perspective it is an absurdly complicated way of applying CSS.

26

If anybody wants to use it, they will decide for themselves. Im not making any coding errors so Im experiencing a 0% chance.

27

Real professionals admit they make mistakes. And they listen to advice.

28

@percy If I may ask. What issues were you facing when you decided to switch to your current approach? It must solve some problem you had. I only ask because maybe there is a better solution that doesnā€™t involve you putting all the styles inside the HTML.

Nobody here is trying to force you to do anything a specific way we are only giving you friendly advice based on experience.

29

Iā€™m sorry if it came across as aggressive; @lasjorg put it better. Personally, Iā€™ve basically written CSS professionally most weeks for the past 10 years. I feel I am pretty up on every part of CSS and at no point have I, anyone Iā€™ve worked with, anyone Iā€™ve taken advice from, anyone who is generally regarded as an expert in CSS, anyone who writes about CSS, anyone well known who teaches CSS, etc ever tried to code in the way you are doing. From a point of view of a relatively experienced developer there seem to be very, very few upsides to your approach and several glaringly obvious downsides.

1 Like
30

@DanCouper I donā€™t think you came across as aggressive.

@percy I can definitely see how learning on your own and working by yourself might have you end up with some quirky workflows. Itā€™s totally understandable. The problem is I really think that in the long run, you will find it much harder to work and maintain larger sites. Not to mention collaborating or working on a team.

But come to think of it, your approach where the HTML and CSS are in close proximity reminds me of styled components or scoped CSS inside components. That is, where you have everything located and scoped closely together. Your approach resembles it a bit on some level.

There are ways to achieve that, although you have to move away from plain HTML/CSS. And that approach comes with its own pitfalls and considerations that must be accounted for.

Another way to achieve something like this is by using good CSS naming conventions and taking a component level approach to building the page. The HTML and CSS will not be physically close to each other, but mentally close, you might say. This approach gives you higher confidence about which styles are targeting what on the page and gives a good structure to the code overall.