Yes it does.
Currently the phone is hidden smaller screens (the whole block with image and text is hidden including phone). What is the proper way to make it visible? Say if I want only phone number and svg to appear but not the image and headline text�
I have not found what is making that block invisible on smaller screens.
@media (max-width: 35rem) {
.home main.entry-content {
display: none;
}
}
I am not sure if its possible to only show svg and phone # without re-arranging HTML.
Hopefully this will work in place of the current CSS rule in order to select only the <h2>
and following <p
> text without selecting the phone number <p>
.element:
@media (max-width: 35rem) {
.wp-block-heading, .headline>p {
display: none;
}
}
I opened this page on my 15â6 inch screen laptop and noticed the cards donât proportianally squeeze keeping image aspect ratio but only wrap. Say what if I wanted to keep those 3 cards with images horizontally as one row and only wrap them or do flex-flow column starting from mobile views (say phones/iPads or other devices). Whatâs a good approach for that?
Try adding flex: 1 1 160px;
to the CSS selector .home .card
. The 160 pixels is a magic number to ensure the longest word fits in.
The âcardsâ will now shrink so they will not wrap unless the browser width is less than 598 pixels. Below 598 pixels the landscaping card will wrap. Below 397 pixels the concrete card will also wrap.
Between 397 and 597 pixels, the landscaping card will be much larger than the other two cards but does that matter? This is how CSS Flexbox works.
I would allow the boxes to scale better and I would do this:
@media screen and (min-width:700px) {
.home .card {
flex: 1 0 0;
max-width:500px;
}
}
That keeps them 3 across from 700px onwards and one column at smaller widths. That gets rid of the awkward break from 3 to 2 across.
The min-height on the .site class. Grid uses âstretchâ as the default value for justify-self and align-self, which means the browser will take up as much space as is available. Since youâve set the min-height to 100dvh, itâs going to spread the contents of that grid to the whole height, and since youâve simplified the headers and footer in that view, thereâs more space to spread out, hence why youâre seeing the gap.
how can I fix the gap?
Sorry, I thought it was blatantly obviousâŚor that youâd figure it out by using the developer toolsâŚ
Remove the min-heights from the .site class
from
.site {
display: grid;
min-height: 100vh;
min-height: 100dvh;
grid-template-rows: auto 1fr;
}
to
.site {
display: grid;
grid-template-rows: auto 1fr;
}
removing min-height breaks sticky footer layout or did you mean I should remove min-height via media query ?
Your sticky layout is flawed anyway because you should have wrapped all the content inside the grid in a main div except for the footer and then you set that main div to 1fr (in the grid-template rule for the wrapper) and in that way it pushes the footer down and keeps the layout to 2 rows.
You have set grid template rows as auto and 1fr which assumes 2 rows but you have many more than that on the home page.
It can be fixed but is not as straight forward as if you had done it correctly to start with.
Add these rules to the end of the css to fix the home page only.
.home #page {grid-template-rows: auto auto auto 1fr;}
.home #page .site-footer {margin-top:auto;}
.home #page .entry-content {overflow:hidden;}
I still have to do services, gallery and contact page. I would prefer to have one set up for the whole site layout and then just build rest of the pages on top of that layout. How I came up with this âauto, 1fr and min-heightâ grid trick - I just googled on sticky footer layout using grid⌠Turns out it can get complicated without proper site layout planning. You are right
Would you suggest to keep the layout as it is and integrate your fix for home page or change the whole site layout and adjust about page if needed and build rest of pages?
I already have div.site
as a wrapper. Footer sits in a separate div outside that.
Thanks for your explanations @DaveMaxwell
You are right. I think I confused how explicit and implicit grid works because when I used grid-template-rows: auto 1fr;
I explicitly set only 2 rows and it wouldnât automatically add any new row unless I use repeat
function, is that correct?
You set 2 rows but you added more than that so the grid row settings donât match and you will get unreliable results because the extra rows are not controlled.
For a sticky footer to work the most easily you just want two rows with the first row filling up all the available space and thus pushing the footer to the bottom. You would then put all your headers and main content inside the first row.
You can have more rows if you want but youâd need to control them so that one row is taking all the available space and pushing the footer down. If you had 3 rows for example like a header, main and footer then youâd set main to 1fr which means it fills the page apart from the header and footer which remain content height only.
I moved .cards
div within main
so now I have header
, main
and footer
sitting within .site
wrapper with
.site {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
Because I moved .cards
div within main
it became a flex item and just sits next figure-text
div. Thereâs no way I can move the cards below the background image like it was before ? I would need to remove .cards
div from main
and place it back after main
?
Yes there is
You need to think logically about the structure. You have a header main and footer so all the main stuff goes inside main. You never need to put anything below main except the footer.
Apply no other styles to .main as it is a container for the middle content. You just then create a structure inside main that does what you want.
For your example we can apply the styles that were applied to main and apply them to figure-text instead.
e.g.
.home .entry-content{
;/* undoing styles here - not needed if you actually remove the original*/
background:none
aspect-ratio:auto;
display:block;
}
.home .entry-content .figure-text {
background: url(http://test.prygara.com/wp-content/uploads/2024/06/home-page-landscaping-driveway-interlock-l.jpg) no-repeat 50% 0;
background-size: cover;
display: flex;
flex-direction:column;
justify-content: center;
aspect-ratio: 2560 / 1441;
}
All Iâve done is substituted the extra styles you had for main and applied it to figure-text instead. If it makes it easier for you you could add an inner div inside main to hold the figure text. but not cards.
As it stands my code will make the figure text background full width but Iâm guessing you want it smaller than viewport. You can do that with a max-width on headline.
.headline {
background: rgba(25, 26, 23, 0.3);
padding: 1rem;
max-width: 980px;
margin: auto;
}