8 Replies - 139 Views - Last Post: 25 May 2019 - 09:57 AM

#1 tango1948   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 04-February 08

media rule to correct layout problem

Posted 24 May 2019 - 10:12 AM

Hi, I have a website - reikiforpeace.org - that when viewed on desktop screen at resolution 1920 X 1080 the layout is incorrect (screen elements are not located correctly), in other desktop and laptop resolutions the display is correct. I think I need to add a media rule so that this resolution also displays correctly, but have no idea how to determine what rule I need to add, any help appreciated.

Thanks
David
Is This A Good Question/Topic? 0
  • +

Replies To: media rule to correct layout problem

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15077
  • View blog
  • Posts: 60,210
  • Joined: 12-June 08

Re: media rule to correct layout problem

Posted 24 May 2019 - 10:51 AM

It's hard to guess. Responsive web design is a tricky business, but can be accomplished multiple ways.. be it media queries or slathering on bootstrap to all your containers.

https://www.w3school..._mediaquery.asp
Was This Post Helpful? 0
  • +
  • -

#3 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5416
  • View blog
  • Posts: 14,325
  • Joined: 18-April 07

Re: media rule to correct layout problem

Posted 24 May 2019 - 01:03 PM

It would also help to know what is not displaying as intended. Mocked up screenshots in such a situation helps to show visually what is not formatted correctly and what it should look like at various resolutions.
Was This Post Helpful? 0
  • +
  • -

#4 tango1948   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 04-February 08

Re: media rule to correct layout problem

Posted 24 May 2019 - 02:17 PM

Hi, Thanks for your reply.
If you view http://www.reikiforp...ki_articles.php using Screenfly you'll see that 10" Notebook - 19" Desktop appear ok, but viewing on desktop > 19" changes the layout. Any ideas how to fix this, greatly appreciated.

Thanks
David

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#5 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5416
  • View blog
  • Posts: 14,325
  • Joined: 18-April 07

Re: media rule to correct layout problem

Posted 24 May 2019 - 02:40 PM

Well your element "pageHeader" which contains that text "Articles About Reiki by Rachel" is set to have a width of 600px. This is a fixed value so when viewed on smaller screens that are not that wide, it pushes the block with the "How Reiki Works" down underneath it to make room for it. When viewed on the larger screens, it has all the room it needs so it pulls that "How Reiki Works" block back up where it should be.

So, with media queries what you need to do is modify the width of the "Articles About Reiki" and "How Reiki Works" blocks to adjust based on the size of the screen.

@media only screen and (min-width: 600px) {
  .pageHeader {
    width: 80%;
  }
}



This is just an example but it is saying that if the resolution width is a minimum of 600px, make that pageHeader element width 80% of the screen. But if they go narrower than 600, the style will not activate and the element will go back to the fixed 600px.

This example is meant to show you what is going on, but you probably need a strong solution by reworking the HTML elements widths and perhaps play with something like percentages.

I hope you get the idea of what is going on now. :)
Was This Post Helpful? 0
  • +
  • -

#6 tango1948   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 04-February 08

Re: media rule to correct layout problem

Posted 24 May 2019 - 03:23 PM

Thanks Martyr, for taking the time to look at this and the detailed explanation, much appreciated.
Was This Post Helpful? 0
  • +
  • -

#7 tango1948   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 04-February 08

Re: media rule to correct layout problem

Posted 24 May 2019 - 04:00 PM

Marty this site is a real mess, I did it many years ago, it was one of my first. Don't have time to do it again from scratch and there's not a site wide media rule that's going to take care of all the problems, so would you suggest changing fixed widths px to % for now.
I tried your solution but it didn't work, in above images the second one with "How Reiki Works" on the left is the correct one, guess that wasn't clear.

Thanks
David
Was This Post Helpful? 0
  • +
  • -

#8 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5416
  • View blog
  • Posts: 14,325
  • Joined: 18-April 07

Re: media rule to correct layout problem

Posted 24 May 2019 - 04:14 PM

I understood you correctly and the media query I provided does work. Perhaps you didn't apply it correctly? If you are looking for a quick fix you can try using percentages. But the problem here is the widths of your middle "pageHeader" block and the "How Reiki Works" block.

Think of it this way....

If pageHeader is 600px in width and "How Reiki Works" is 400px in width, but the resolution is less than 1000px, it doesn't have enough room, so pushes your "How Reiki Works" block down and it falls to the left. If the resolution grows to 1920, it has enough room, so both can be show side by side like in picture 1 you posted.

With the media query all we are doing is adjusting the widths of those blocks based on the width of the window. If the window grows wider, so does the elements so that the "How Reiki Works" block remains pushed down and to the left.

Not much else I can explain. :)
Was This Post Helpful? 0
  • +
  • -

#9 tango1948   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 04-February 08

Re: media rule to correct layout problem

Posted 25 May 2019 - 09:57 AM

Hi Marty, Yes of course your code is correct.
With your help and Screenfly I've succeeded in getting the site to display on all desktop & laptop screens which is what I need.
Thanks very much for taking the time to explain and share your knowledge, for me that's what the internet's all about.
One question, how do I get email notifications when there's a reply to my thread on this forum.

David
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1