grid areas with media screen size

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 501
Joined: Fri Oct 02, 2015 3:28 pm

grid areas with media screen size

Post by JurajB » Sat May 21, 2022 4:22 pm

Hello!
I have problem. Im using grid areas:

Code: Select all

.div--rows {
height: 100%;
display: grid;
grid-template-columns: 1fr 30px 300px;
grid-template-rows: 253px 30px 1fr 30px 250px;
grid-template-areas: 
'header header header'
'hpause hpause hpause'
'content cpause right'
'fpause fpause fpause'
'footer footer footer';
    }
with divs like this:

Code: Select all

    .div--header {
grid-area: header;
background: #fff;
border-left:  0px;
border-right: 0px;
border-bottom: 1px solid black;
border-top: 0px;
    }
the result you can see is here homoorigin.com/index.php

the problem is that with:

Code: Select all

@media only screen and (device-width: 470px) and (-webkit-min-device-pixel-ratio: 2) and ( min--moz-device-pixel-ratio: 2) {
                 .div--rows {
height: 100%;
display: grid;
grid-template-columns: 200px 30px 200px 30px 200px 30px 200px;
grid-template-rows: 452px;
grid-template-areas: 
'header'
'hpause'
'content'
'cpause'
'right'
'fpause'
'footer'; }
}
1. background is not working
2. divs border is not there
3. when I force there background by setting it in the top of the code the background color of the modules isnt white as I declared there.

Im posting this here because its modified cassiopeia.
Thanks for any help!
JurajB

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 501
Joined: Fri Oct 02, 2015 3:28 pm

Re: grid areas with media screen size

Post by JurajB » Tue May 24, 2022 9:22 am

is cassiopeia design responsive for this behavior?

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 361
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: grid areas with media screen size

Post by Mr. Wimpy » Tue May 24, 2022 12:17 pm

It's because the css sits inside this media query:

Code: Select all

@media screen and (min-width: 1900px) and (min-device-width: 1900px) {}
It will only display correct when your screen is at least 1900px wide and your window is at least 1900px wide.

Change or remove the media query and your css will work.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 501
Joined: Fri Oct 02, 2015 3:28 pm

Re: grid areas with media screen size

Post by JurajB » Wed May 25, 2022 3:12 pm

whats wrong with the code now?

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 361
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: grid areas with media screen size

Post by Mr. Wimpy » Wed May 25, 2022 5:44 pm

Code: Select all

@media only screen and (device-width: 600px) and (-webkit-min-device-pixel-ratio: 2) and ( min--moz-device-pixel-ratio: 2) {}
  • The css in this block will only be used if a device/screen is 600px wide and has at least a pixel-ratio of 2.
    All other screens will ignore it.
  • Also you accidently switched grid-template-rows and -columns in .div--rows in the "phone" block.
  • And fr is not a valid unit for height.
Anyway...
Sometimes it's good to start with a clean slate:
Copy your current css to a temporary file, so you can reuse some of it later.
Then delete your current css and start over.
  1. Start to write css for small screens/mobile first (without media queries!).
  2. When you are done for small screens, start to work on bigger screens.
  3. If your css for bigger screens needs ajustments: only then use media queries.
  4. Only use media queries for css that needs ajustments, not the whole thing.
  5. Keep media queries as simple as possible:

    Code: Select all

    @media screen and (min-width:600px) {}
    @media (min-width:600px) {}
This post is a bit longer than I thought, but I hope it helps.
Regards,
Wim


Post Reply

Return to “Templates for Joomla! 4.x”