How to reposition photos for mobile screens

HTML-CSS
1

I have learned how to reposition <div class by @media screen and (max-width:800px) but I dont know how to reposition photos.

On a wide computer screen I have a group of photos on the right side but on a mobile screen I want the photos to be at the top.

I also have created a page for mobile screens and maybe I could redirect mobile users to that page but I dont know how to do that.

I dont want the computer screen pages viewed by mobile devices and the mobile screen pages viewed by computers.

Can anybody help?

2

Do you have some code you can show, like a Codepen?

Making separate sites for desktop and mobile is not advisable and should not be necessary.

3

Firstly, my style of CSS is not in accordance with protocol, however I find my style much easier to follow and easier to correct mistakes.

This is the snippet for the computer screen:-

<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>

This is the snippet for the mobile screen:-

<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>

And this is the snippet that I’ve tried but it does not include the photo:-

<style>@media screen and (max-width:800px) { .pha { position: absolute; width: 6%; left: 7.2%; top: 17%; } }</style>

Its OK to have one page for both desktop & mobile, but I dont know how to do that. I hope you can help.

4

I can’t really do much with that code. Can you please post a live version of the site.

Where is the style element with the media query located in relation to the styles it is overwriting?

Also, how many separate style elements do you have? Are you placing the style element in the body above every block of HTML that you want to affect? Because this is not a good approach. You should really use an external stylesheet for 90% of the CSS and only use style elements for critical CSS above the fold (if needed for performance).

It really isn’t that OK. It’s a very outdated approach and you will have to do redirecting based on imperfect client information.

5

I am working in localhost only. The site is not online yet.

I find CSS very complicated but a necessary evil which is why I said my style of CSS is not in accordance with protocol, and to simplify it I keep all the coding grouped together the way I have shown.

Each 2 lines represent each photo, of a group of 12 photos, that I can easily change the percentages to reposition the photos.

The (.pha) and (“pha”) tie the 2 codings together, and yes I am placing the style element in the body above every block of HTML. By coding that way I can easily locate any errors.

The media query repositions the background block OK, but I cant get the photos to reposition.

If the photo repositioning can be done in Javascript that would be OK.

I’ll read the links you provided but do want to keep the coding as simple as possible.

6

Not that by using position:absolute you’re making your CSS complicated and extremely brittle – you’re effectively trying to treat the web page as a printed page, with elements locked in specific defined positions, so you are now fighting against how web layout works. And using absolute to position multiple elements on the page is likely to poison your CSS, as it in turn requires you to absolutely position other elements in relation to them and so on. Also, percent for width is fine, but for height, it’s a web page, not a sheet of paper, so it doesn’t really work so well

As @lasjorg says, need to see more code, such as an example on Codepen: your photos are laid out relative to other elements on the page, so without being able to understand what the overall structure is it’s extremely difficult to give advice

7

I like constructive criticism but you didnt give an alternative to position:absolute. However, I have tried many alternatives and found that “absolute” is the only position that works effectively. Recently I tried position:relative but that did not work effectively. Everything Ive done works fine with no “poisoning” and if there was an easier way of doing things I would have found it by now, coz Ive tried numerous alternatives to everything Ive done. I havent used “height” anywhere in my coding, only width as that controls both.

Numerous times Ive read about people who are learning CSS find it so complicated, including on this forum, so if they followed my style Im confident they would not find it so difficult. Yes, I know that a lot of my coding is repetitive but that is what makes it so simple.

All Im asking for here is the coding to “reposition” the photo, nothing more. Im not asking to uncomplicate web layout or unlock positions, or unpoison any coding. If some of the coding must be in an external sheet and or some in the header, Im confident I will be able to figure that out. I did read in my early days of learning that having an external CSS sheet is only an option and not a necessity.

Or if the coding cant be done in CSS then Javascript will be OK particularly to redirect to the mobile page when the screen width pixels reach a certain number.

8

You’re missing the point slightly: elements are positioned in relation to other elements: even if you only have those two things, there is implicit positioning relative to a parent (body), but with this you have very specific sizings so I have to assume you are giving them sizings because there are other things on the page. And CSS is for visual styling. It is much easier to debug the issue if we can see the issue in context. If you have that class with one set of rules, then a media query where you define the modified set of rules, as possibly shown in your snippet, it should change depending on screen width: the syntax is correct in isolation and possibly in context. But as cannot see the context, can’t tell why it isn’t working for you.

The alternative ideally is that you use display: flex or grid (depending respectively on whether you want the elements to flexibly fill a container one after the other, or if you know in advance what layout structure you want). Those are actual layout APIs for groups of elements on the screen (vs using absolute, which is manual and is not)

9

OK, I can try “flex & grid” later, but the point you are missing is that I want to know how to reposition the photo (either by CSS or Javascript). I know how to reposition everything else.

10

Again, your media query syntax is correct, but it is not possible to see why it does not work w/r/t repositioning because there is no context

11

The media query I have used only includes the CSS elements whereas the photo is contained in the HTML elements, and it is the HTML elements I want changed when the screen width reaches 800px.

So can those HTML elements be changed by CSS or Javascript? If the HTML elements can not be changed, then page redirection should solve that issue.

UPDATE

As a matter of interest, if I have this coding:-

<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>

The background of the images displays as expected, whereas if I delete the 2nd line HTML coding it does not display.

On the other hand if I add this coding, which does not include the 2nd line HTML coding:-

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

The background of the images displays as normal on a wide screen, and also displays repositioned on a narrow screen. Im saying this because in that scenario CSS picks up the HTML elements.

So if CSS can pick up the HTML elements in that scenario, why can it not pick up these elements? Or maybe it can and I need to be shown.

<div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:285%;" ></div>

UPDATE

The media query I have used only includes the CSS coding

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

Does not include

<div class="images"></div>
or
<div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:285%;" ></div>

whereas the photo is contained in the HTML div coding as above.

And it is the HTML div coding I want changed from

<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>
to this
<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>

when the screen width reaches 800px.

I can get the top lines (style) to change but not the bottom lines (div).

UPDATE

This is the coding for the background and the photo on wide screen. When the screen is narrowed the background repositions the way I want but the photo remains in the original position and is too small.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<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 this line is deleted the background does not appear-->
<style>@media screen and (max-width:800px) { .images { position: absolute; height: 47%; width: 96%; left: 2%; top: 16%; background-color: #98FF98; } }</style>  <!--This line works good when screen is narrowed-->
	<div class="images"></div>  <!--This line does nothing and doesnt need to be there-->

<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>
<style>@media screen and (max-width:800px) { .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> <!--This line does not reposition the photo when the screen is narrowed-->

</body>
</html>

This is the coding for the background and the photo on a narrow screen. Which is how I want the coding above to look like when the screen is narrowed.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<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>

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

</body>
</html>
12

What do you mean? There is no such thing as a CSS element, CSS styles HTML elements

I’m confused, The second line is the HTML, so if you delete the HTML there is nothing to display, if you are rendering some HTML in a browser, it can’t render if it doesn’t exist.

This is what I mean by there no being any context. You’re showing tiny, tiny snippets of your code out of context, and they don’t make sense without the surrounding code that you aren’t showing.

13

Please just make a Codepen or JSFiddle with your code so we can actually help.

14

OK, I’ll edit it in longhand.

15

OK, I may need to do that but this small problem may get resolved the way we are going. It is almost the end of my day in my timezone.

16

Not sure why you think that. We (I’m) are no closer to understanding the problem than we were to begin with.

17

Maybe you can get a little closer to understanding if you read my last update.

18

What do you mean by, you want to change this…

<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>

…to this?

<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>

That doesn’t make any sense. That is two different elements with different CSS.

What is the media query doing and what element is it targeting?

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

Honestly just make a page we can look at cause I’m just super confused.

You can just edit this and post the link
https://jsfiddle.net/q7ksvoh0/

19

It’s not a case of doing it “in longhand”, I’ll try to make this as clear as possible: The things you have posted are part of a larger piece of code. Extracted from there, they have no context, so what you’re saying makes no sense at all. If you won’t show us the actual code, it’s impossible to help. You aren’t showing us the code.

20

Maybe tomorrow I’ll post all of the code but only for the problem I have so that things are simplified. And I can try to post screenshots of the results.