0

I have this photo site that I am noodling with and I have an issue with reactive sizing of the browser window. The images look great at 100%, but when I size down the window the landscape images start to resize, which I understand they are sizing down to meet the width of the browser window.

However when I get really small, to mimic a smartphone, I really want these images to stack, as this makes more sense for images that are portrait. So the idea is to go from left to right and then top to bottom when the browser is small. Im kinda rusty at css and I cant remember how to get this done. Can someone please help a brutha out and point me in the right direction so I can get this going? Im doing this all thru my WP override option, so an approach I should follow with just css would be the best, as Im a tard with anything more complex.

the site is here: http://jadanduffinphotography.com/

Thanks! -Jadan

Matt
  • 74,352
  • 26
  • 153
  • 180
Jadan Duffin
  • 1
  • Could you be so kind to include (more)code, So we can help you for the 110%? – Rafael Apr 25 '13 at 08:48
  • The stylesheet is located here: http://jadanduffinphotography.com/wp-content/themes/heat/style.css I would add just the specific problem, if I knew what it was that was causing it:/ If you have any suggestions on where the issue lies, Id appreciate it. I wrote below to Sonu Joshi on more of what Im trying to fix. I have uploaded a jpeg that explains my problem here: http://www.jadanduffinphotography.com/site_device_diffs_jadanduffinphotographydotcom.jpeg – Jadan Duffin Apr 26 '13 at 07:19

2 Answers2

0

What I suggest for you to do is:

  • write css to make the images float: left; and position: relative;inside a container div

  • detect the orientation of the browser window

  • according to the orientation, set the width of the container div

This should make the images display horizontally when possible and make them stack vertically when not.

You should take a look at this too probably.

Community
  • 1
  • 1
Joum
  • 3,189
  • 3
  • 33
  • 64
  • Thank you Joum! This is exactly what I needed. I will try to explore your suggestions tomorrow. – Jadan Duffin Apr 26 '13 at 07:11
  • I must tell you I suggested this without looking at your website. I now saw it and I'm not sure if this suggestion will produce the outcome you want/need. Let me know if it doesn't and I'll try to help you out. Furthermore, I saw your website in a Nexus 7 device, both in landscape and portrait mode and it renders fine. It always scrolls the image left though, not up and down (when in portrait orientation) as I think you might want, right? – Joum Apr 26 '13 at 07:22
  • That is correct, up and down on smartphones. Im going to try to play with your suggestion, and will let you know how it goes, if I can find the right div thats causing this – Jadan Duffin Apr 26 '13 at 07:27
  • Right now I'm at work and (incredibly) I can't access a webkit browser to inspect the CSS and help you out, I'll check it out when I get home. – Joum Apr 26 '13 at 07:31
  • Thanks a ton! To update you, I tried your suggestions to each div in firebug and got nothing. I know there is specific sizing css calls for diff sizes, so I wonder if I need to look at the more global setups? I dont even know if Im making sense lol – Jadan Duffin Apr 26 '13 at 07:37
  • The kind of behaviour you want to the layout can't be accomplished with pure CSS. The idea here is to have 2 different CSS files: one to be used by the browser when in landscape mode, other to portrait mode. Check out the link I provided in the answer to find out how to have 2 different CSS files for each browser orientation. What you have to do next is identify the section of the CSS responsible for creating the horizontal scrolling technique, and in the portrait CSS file, change it to produce vertical scrolling. It's gonna imply rewriting most of the scrolling script, so beware. :) – Joum Apr 26 '13 at 07:44
  • oh, Im sorry I wasnt clearer. I dont want the browser window to change orientation, I just want to make the images stack on top of each other and not slide horizontally at smaller screen sizes. – Jadan Duffin Apr 26 '13 at 07:54
  • Yes, I got it. The thing is, if you want a responsive layout, you have to somehow adapt the CSS rules to different situations. One of the ways is how I suggested. You can also do it with client-side scripting (Javascript/jQuery) - detecting the width of the page in the browser and choosing the appropriate scrolling script for that situation. – Joum Apr 26 '13 at 07:59
0

This is good. Don't know what's actually bothering you with the responsive layout but so far your site works great.

If you still do not want that resize/layout on smaller device do remove/edit between lines #7201 - #7509 on this file http://jadanduffinphotography.com/wp-content/themes/heat/style.css

Rajender Joshi
  • 4,155
  • 1
  • 23
  • 39
  • Thank you Sonu Joshi. Its not that I want to lose the responsive quality, I love it! The issue is that if viewed on an iPhone the images will stack on top of each other, which is what I want on my smartphone viewers, but on the iPads and desktop browsers I want the horizontal UX. So maybe I need to rework some of the css for the small devices and force the stacking better. Right now its running wild! – Jadan Duffin Apr 26 '13 at 07:14