003-home page-background image with text

Yes it does.

1 Like

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;
  }
}
1 Like

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.

2 Likes

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.

2 Likes

I was wondering what gives that gap (see red arrow on screenshot) in ipad air view…

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.

1 Like

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;
}
1 Like

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.:slight_smile:

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;}
1 Like

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 :slightly_smiling_face:

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.

1 Like

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 :slight_smile:

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;
}

1 Like