My hero /hero image is not rendering correctly on large screen sizes

[adefesoq]

Hello everyone… I’m developing this landing page (challenge from frontend mentor) where the hero image on the mobile screen will be different from the hero image on desktop screen. So I made use of the <picture> element to serve the images for different screen sizes(desktop & mobile).

Here comes the problem, from min-width: 800px Firefox and chrome renders the hero on desktop screen differently… The hero is usually off & a lil different from what I intend to do mostly on Firefox… I have tried my best and I still haven’t figured how to make these two browsers render the hero exactly as I want.

Here is the codepen link to the problem:

Codepen

Thanks

[PaulOB]

@adefesoq

The hero is usually off & a lil different from what I intend to do mostly on Firefox

Can you explain what you mean by ‘usually off & a lil different’?

This is what I see in Firefox and Chrome side by side.

Am I looking at the wrong thing or is there an issue I haven’t noticed ?

On another matter you have set you hero to height:50% which won’t match the content you are placing inside it (such as your images which have a pixel height).

[adefesoq]

@PaulOB at a width of 1000px this is what I got on chrome

And this is from Firefox

– The hero content is not aligned on Firefox even though I used align-self property on it.

– The blob background also overflows a little bigger on chrome than on Firefox.

[adefesoq]

@PaulOB

On another matter you have set you hero to height:50% which won’t match the content you are placing inside it (such as your images which have a pixel height).

Can changing the height to px unit solve this

[PaulOB]

@adefesoq

@PaulOB at a width of 1000px this is what I got on chrome

Firefox and Chrome are exactly the same for me at 1000px also.

I can see no visual difference between the two of them and the content on the left is aligned to the top in both as there seems to be no rules applying to centre it anyway.

Is your codepen different to the page you are looking at?

From your screenshot it looks like your Firefox has the text zoomed smaller from the browser controls but that might just be your screenshot. Actually it looks like you have zoomed smaller because the text has not wrapped. (Or Chrome is zoomed larger)

@adefesoq

– The blob background also overflows a little bigger on chrome than on Firefox.

That’s most likely because you did not put both browsers to the same height because as I mentioned you are limiting the height to 50% so the blob background will overflow the container depending on the browser height. You don’t need the 50% height.

Looking at your code you have moved the image top and left using relative position which will leave a whole at the bottom of that section where the image would have been. You won’t be able to align anything with something that has been relatively moved out of the way because as far as the page is concerned the element is still where it would have been.

I suggest you remove top and left from .hero-bg and use margin-left and margin-top instead and thus maintain the flow of the document.

If you want the content on the left centred in respect to the image on the right then apply align-items:center to .hero.

However I think you may be looking at different page than the one on codepen and I’d need to see the actual pages if your issues are not rectified with the above.

@adefesoq

Can changing the height to px unit solve this

You don’t seem to need a height there at all so I would remove it.

[adefesoq]

@PaulOB

I can see no visual difference between the two of them and the content on the left is aligned to the top in both as there seems to be no rules applying to centre it anyway.

Is your codepen different to the page you are looking at?

From your screenshot it looks like your Firefox has the text zoomed smaller from the browser controls but that might just be your screenshot. Actually it looks like you have zoomed smaller because the text has not wrapped. (Or Chrome is zoomed larger)

No the code is not different… I checked the zoom on Firefox and it 100%

[PaulOB]

@adefesoq

No the code is not different… I checked the zoom on Firefox and it 100%

Did you check Chrome?

Why has the heading text wrapped in Chrome and not in Firefox.?

Please check carefully because as I have said a few time’s now there is no difference between those browsers:)

[adefesoq]

@PaulOB

That’s most likely because you did not put both browsers to the same height because as I mentioned you are limiting the height to 50% so the blob background will overflow the container depending on the browser height. You don’t need the 50% height.

Your explanation is crystal clear but I thought limiting the height will help me achieve the replicate of the design… This is the design

After seeing the design, is there any other way you think I can achieve this?

[PaulOB]

@adefesoq

After seeing the design, is there any other way you think I can achieve this?

If you implement the changes I mentioned in my last post

@PaulOB

I suggest you remove top and left from .hero-bg and use margin-left and margin-top instead and thus maintain the flow of the document.

If you want the content on the left centred in respect to the image on the right then apply align-items:center to .hero.

Lastly remove the height we talked about then you could simply put a negative bottom margin on .here to achieve the overlap.

e.g.
.hero-section{height:auto}
.hero{margin-bottom:-90px;}

[adefesoq]

@PaulOB

Lastly remove the height we talked about then you could simply put a negative bottom margin on .here to achieve the overlap.

e.g.
.hero-section{height:auto}
.hero{margin-bottom:-90px;}

@PaulOB this solves it… Another issue is the hero content, I have a container class on it that has a width of 90% and max-width of 1400px… From screen width of 800px and above, the hero does not follow the rules on the container… I have inspected with the dev tools but I see nothing

[PaulOB]

@adefesoq

I have a container class on it that has a width of 90% and max-width of 1400px

Are you sure as there is not a container class in your codepen?

[adefesoq]

@PaulOB

Are you sure as there is not a container class in your codepen?

Yes, there is a container class on the hero content in my HTML <div class="hero-content container" and the class is defined in my CSS too… The hero content overflows from width of 800px upward

[PaulOB]

@adefesoq

Yes, there is a container class on the hero content

Ah ok I looked at .hero because that’s where a container rule would need to be.

You’ve applied it to .hero-content and it does exactly what you tell it Hero-content is a flex-item inside .hero and .hero is 100% wide. The flex item is therefore restricted to a width of 90% and a max-width of 1400px.

The sensible thing would be to apply the container class to .hero instead and then the layout will keep track of everything else. However I guess you want that image to the right of the viewport and that is a major problem. There is no alignment we can give to the left side of the hero-content to match it with the left side of the header content or other centred containers because they are 90% width and a max-width of 1400px. The conundrum is that you want a 100% width element but you want the content on the left of the hero to align with the rest of the centred layout.

That’s not really a viable approach.

You may be able to fudge it by removing that container class from the hero content and using some magic numbers to align the left content.

Try this:

@media screen and (min-width: 800px) {
  .hero-content{
    margin-left:5%;
  }
} 

@media screen and (min-width: 1575px) {
  .hero-content{
    margin-left:calc(50% - 700px);
  }
}

I can’t guarantee that it is exact but it may be close enough. Otherwise you are looking at a re-design and using a background image perhaps fr that right image although that will still be complex.

[adefesoq]

@PaulOB

The sensible thing would be to apply the container class to .hero instead and then the layout will keep track of everything else. However I guess you want that image to the right of the viewport and that is a major problem.

Yeah, I removed the container class from the .hero when I saw the output didn’t match the design given… Then I decided to put the container class on . hero-content.

[adefesoq]

@PaulOB

@media screen and (min-width: 1575px) {
  .hero-content{
    margin-left:calc(50% - 700px);
  }
}

I can’t guarantee that it is exact but it may be close enough. Otherwise you are looking at a re-design and using a background image perhaps fr that right image although that will still be complex

It did solve it, thanks!!! But if I may ask, can you explain how you came about the figure above?

[PaulOB]

@adefesoq

It did solve it, thanks!!! But if I may ask, can you explain how you came about the figure above?

Trial and error

At 800px and upwards it was easy as the margin-left would only need to be 5% to match the 90% header that was margin:auto.

However once the header reached 1400px (it’s max-width) then the 5% margin left would no longer be suitable. Therefore we need to calculate how much space would be at the side of an element that is 1400px and centred within a 100% viewport. The calculation would therefore be 50% - 700px (half the viewport minus half the max-width of 1400px).

I had to set the media query to 1575px (not 1400px) because when the header reaches 1400px wide it is already at a 5% margin either side so they need to be accounted for. I just did a bit of trial and error tweaking to see what worked best.

[adefesoq]

@PaulOB

I had to set the media query to 1575px (not 1400px) because when the header reaches 1400px wide it is already at a 5% margin either side so they need to be accounted for. I just did a bit of trial and error tweaking to see what worked best.

Thank you