Media Queries, changing image layout for smart phones

[timothyi34297763]

I have a website with two columns. The left is text, the right are images. It looks great on a desktop, however, on a smart phone, the 2 columns collapse and merge into one with the left on top and the right on the bottom due to a media query at 480. The problem is that I have 5 images stacked up on top of each then and it doesn't look good. It's better to separate the images in between paragraphs and the like. How can I change the image layout with a media query so they are placed in between paragraphs and not stacked on top of each other, looking dumb.

Here is a video.

Media Query Dream Weaver Change Image Layout - YouTube

Here is image of site showing two column layout, text on left, images on right.

[pziecina]

There is probably no easy way to do this, as it all depends on -

• The html code
• The css layout system you have chosen
• A combination of both html and css.

The first one may require you to rewrite your html. The second one will depend on if you have used flexbox as your css layout system. If you have used floats then you cannot do as you wish.

If you have used flexbox, then it is a simple matter of changing the order of the items in css using the flexbox 'order' property.

[timothyi34297763]

I wish I knew offhand. Can you take a look by using the right click view page source code on this site.

www.ivoryestate.com

username: help

password: help

I added a user for you since the site isn't live yet.

[pziecina]

I have the plumber here at the moment, (so no electricity) and I am using my iPad, (so no view source).

Once I get my electrical supply restored, I will take a look, but if someone else from the forum can take a look hopefully they can say what the layout system is.

Sorry for the delay.

[timothyi34297763]

I hope he isn't charging you too much. With contractors, I'd get at least 3 estimates every time and always let them know you are shopping around

Take your time, of course any help at your convenience would be very much appreciated.

I forgot to add, Media query stuff is located at responsive.css (1 and 2)

[W_J_T]

pziecina  wrote

I am using my iPad, (so no view source).

Just for the record, sure you can. There are various apps that facilitate this, some of which provide formatting and syntax highlighting. Or if you are comfortable writing javascript you can simply formulate your own solution to do so. :--)

[pziecina]

W_J_T  wrote

pziecina   wrote

I am using my iPad, (so no view source).

Just for the record, sure you can. There are various apps that facilitate this, some of which provide formatting and syntax highlighting. Or if you are comfortable writing javascript you can simply formulate your own solution to do so. :--)

Yes, but as I found out they will not do so for a password protected page as they rely on being able to get the page in order to display the html, css and js.

[W_J_T]

I was referencing your statement about iPad and view source, you said there is no source view abilities, when in reality there are. But beyond that, you are saying that if you would log into a secure page there would be no access to the client side of things once served?

[pziecina]

The safari iOS browser has no built in view source.

I have a js solution which I wrote, which reloads the page in a new window, a code view app in which the website address is sent to the app from the browser, and a dev tools app, which allows me to view the html, css and js, but again the website address is sent from the browser.

All the above solutions rely on a none password requirement. As they all have no browser view in which to enter a user name and password.

[W_J_T]

pziecina  wrote

The safari iOS browser has no built in view source.

I have a js solution which I wrote, which reloads the page in a new window, a code view app in which the website address is sent to the app from the browser, and a dev tools app, which allows me to view the html, css and js, but again the website address is sent from the browser.

All the above solutions rely on a none password requirement. As they all have no browser view in which to enter a user name and password.

pziecina  wrote

I am using my iPad, (so no view source).

Well, thats all a long way from your original statement and with no correlation regarding you saying you have no options to do so on iPad. So again once you get past a login, your saying you can't view client side source that is served to you? News to me, no issues here. ;--)

[pziecina]

Good, so how about telling me and others how you are viewing source on a password protected page?

[W_J_T]

pziecina  wrote

Good, so how about telling me and others how you are viewing source on a password protected page?

Really? You're the person who claims too only take on blue chip corporate projects starting at a minimum of 100K, so given that along with all you claim to know, something seems rather strange here if its not working for you or you can't figure it out?

[pziecina]

And it seems very strange that you cannot tell anyone how to view source on a password protected page using iOS safari !

[W_J_T]

As stated twice already, there are no issues gathering client side source of a served page once past the authentication stage into a secured area. Why do you claim otherwise? Once anything is served client side its accessible so where is the issue gathering source? It’s a bit befuddling as to why you claim it is not possible or that you are having issues, especially given all that you claim to have at your disposal?

[pziecina]

Thank you, you have proven that you have absolutely no idea about 'view source' using iOS or apps.

You are talking about a desktop browser that has a view source option. Please get an iPad and test what you are saying. Otherwise what others are saying, (that you are a troll) is looking more and more likely.

If you wish to disprove that, simply say how you are viewing source from a password protected page using an iPad.

Simple.

[W_J_T]

pziecina  wrote

Thank you, you have proven that you have absolutely no idea about 'view source' using iOS or apps.

You are talking about a desktop browser that has a view source option. Please get an iPad and test what you are saying. Otherwise what others are saying, (that you are a troll) is looking more and more likely.

If you wish to disprove that, simply say how you are viewing source from a password protected page using an iPad.

Simple.

I specifically responded to your initial post about using an iPad, stating that was not the case, that was the point of responding. It then almost seemed you googled about and educated yourself with a followup saying you now have all types of solutions but none of them work. Your responses since have been laughable. Client side data can not be inaccessible once served, thats the fourth time expressing this fact, yet you seem to remain acting otherwise.

[Nancy OShea]

#1 You should step up to Bootstrap 4 which uses Flexbox layouts instead of floats.   Flex order Bootstrap classes make it simple to re-arrange content on xs, sm, md, lg devices.

https://getbootstrap.com/docs/4.0/utilities/flex/#order

#2 what's up with all the LTR direction on every paragraph?  You don't really need all that extra code do you?

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

#1 You should step up to Bootstrap 4 which uses Flexbox layouts instead of floats.   Flex order Bootstrap classes make it simple to re-arrange content on xs, sm, md, lg devices.

https://getbootstrap.com/docs/4.0/utilities/flex/#order

Flex order is not going to work when the text/images are seperated into 2 columns as components can't jump out of their containers.

[Nancy OShea]

If Tim upgrades to Bootstrap 4, he needs to clean up his code -- killing 2 birds with one stone.

[pziecina]

osgood_  wrote

Flex order is not going to work when the text/images are seperated into 2 columns as components can't jump out of their containers.

actually they can.

You can rearange anything inside the parent Flexbox container, and if you make a child element into a flexbox container, you can rearange anything inside that. The problem with doing that though, is the html structure, and without knowing that it may not be possible to apply flexbox correctly.

I think bootstrap would be overkill for just one page, but as I still have no power to my office I don't know if it is just one page.

Just thought I would add this -that is how you can easily make flexbox 2 directional.

[osgood_]

pziecina  wrote

osgood_   wrote

Flex order is not going to work when the text/images are seperated into 2 columns as components can't jump out of their containers.

actually they can.

You can rearange anything inside the parent Flexbox container, and if you make a child element into a flexbox container, you can rearange anything inside that. The problem with doing that though, is the html structure, and without knowing that it may not be possible to apply flexbox correctly.

I think bootstrap would be overkill for just one page, but as I still have no power to my office I don't know if it is just one page.

Just thought I would add this -that is how you can easily make flexbox 2 directional.

If you look at how the page is made up the text in the left column is just continuous - 1 single container of paragraphs/headings - you cant use flex order to position the images in the right column within the text in the left column, as the OP wants.

You can only do that IF somehow all the components are already postioned in a single container so the text in the left column will have to be broken up into sections to allow another component to be positioned between them.

[pziecina]

I am using my iPad at the moment Os, as they had to turn the power off in my office, (water leak) so no computer to view source when the page is password protected.

I have not seen the OP's page source.

[osgood_]

pziecina  wrote

I have not seen the OP's page source.

Well Im just looking at the image, its clear to me there are 2 seperate columns, one for the text and one for the stack of images. Its not doable unless you serve up a slighly different structured layout, one for dtp and one for mobile.

[pziecina]

I was thinking css multi-column, but then again not many people use it for some reason, even though it is very well supported and probably better than flexbox for such a layout, (if it was not for the image problem).

To the OP.

Can you post the html code into a reply on the forum?

[osgood_]

pziecina  wrote

I was thinking css multi-column,

I've used it on a couple of ocassions to do something, although I cant remember exactly what, other than I needed to distribute some content equally between columns