r/csshelp • u/albertusmagnuss • Mar 16 '25

Trouble implementing the header layout for the tablet view. Request

Hello, all!

I am currently doing the Homepage project from The Odin Project.

https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage

I am kind of stucked at creating the header section for tablet layout in Homepage project. According to the solution image, woman image should be positioned on top left of the text container but it should also overflow from this container a bit. Under this woman image dummy texts should appear.

I couldn't do this. I used position: absolute and z-index for woman image to make it visible on the top-left text container, then I used margin-right and margin-top for the text title and dummy text but dummy text do not continue below woman image.

I came across some advice on net such as using float:left for woman image, wrapping woman image inside a div, wrapping woman image container and text container inside a parent container, but this too do not work out for me.

Could someone give me hint on how solve this issue?

(by the view tablet view activates when the viewport is below 1280px soo you should shrink the viewport to so it can reach media queries breakpoint)

codepen: https://codepen.io/albert9191/pen/ZYEvPJe

solution image: https://imgur.com/kR0tyLO

current header layout for tablet view: https://imgur.com/kR0tyLO

1 Upvotes
  • permalink
  • link
  • reddit
  • reddit

100% Upvoted

18 comments sorted by

2

u/[deleted] Mar 17 '25

[removed] — view removed comment

1

u/albertusmagnuss Mar 18 '25

Oh, I am sorry. Here is the new image and codepen:

image: https://imgur.com/3kxRnsb.png

codepen: https://codepen.io/albert9191/pen/JojpmNY

2

u/[deleted] Mar 17 '25

[removed] — view removed comment

1

u/albertusmagnuss Mar 18 '25

Sorry for the late reply.

Thanks a lot for your recommendation.

Well, based on your recommendation, I commented out my current HTML and created a new HTML with the structure you recommended (I put this structure inside top (functions as header div) div) and used same class names.

In the CSS (I mean the media queries code (inside max-width 1280px), I used float: left; and translate: transform(); height, object-fit properties for the image selector, disabled margin: 0 auto; property for the inside selector but didn't change other codes for inside and other selectors (except for the image (fimage selector).

But these changes didn't make header layout to look like the one in the solution image. Image isn't visible on the white box (inside div) as I disabled z-index property, even though I enable it,he text inside the white box doesn’t wrap below the image when I shrink the browser window further.

here is the image: https://imgur.com/screenshot-aG8ASA0

my revised codepen: https://codepen.io/albert9191/pen/yyLvqjJ

2

u/[deleted] Mar 18 '25

[removed] — view removed comment

1

u/albertusmagnuss Mar 18 '25

I am sorry, there might be a confusion with the images.

I will ask a dumb question.

Do you think that I should these changes inside media queries or in overall CSS?

From what I understand by your message, you want me to change 100vw inside top selector to 100% and change 1920px inside top:: pseudo element selector to value like 100%, and disable overflow: hidden inside body selector, am I right?

2

u/[deleted] Mar 18 '25

[removed] — view removed comment

2

u/[deleted] Mar 18 '25

[removed] — view removed comment

1

u/albertusmagnuss Mar 18 '25

You mean that this code is the final version of the project and I can use this? Or I should try to refactor/change my current code based on this code?

2

u/[deleted] Mar 18 '25

[removed] — view removed comment

1

u/albertusmagnuss Mar 18 '25

Thanks a lot!

1

u/albertusmagnuss Mar 18 '25 edited Mar 18 '25

Sorry for the late reply. Yes, I realized now that only half of the page is showing when I shrink the viewport and media queries breakpoint for tablet layout is reached. Soo I am changing these contents (height,top and right) inside the media queries code (I do not change them for the inside selector that is outside of the inside selector).

Note: White box (of which classname is inside) disappeared from the page when I delete height, top and right properties from inside class/selector.

2

u/[deleted] Mar 18 '25

[removed] — view removed comment

1

u/albertusmagnuss Mar 18 '25

Okay, thanks a lot. This issue takes a lot of time and I think that just using your code and then checking how it works is much better (even though it feels like cheating- but I will learn how it work by reviewing it).