Skip to content
Submitted 12 months ago

blog - preview -card ->solved

ritu jha•60
@ritujha19
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What specific areas of your project would you like help with?

I have a question --> why does my file looks different in edge and different in google chrome .

in edge my files looks prefect but in chrome my files looks different its like look everything goes up .

why does it happens ?

i don't know it happens on only laptop or anyone else also so please, preview my solution if you see this so. Please give me feedback .

OR

if u know why its happened , then please let me know about this also and also u know how to resolved it , so please help me also to resolved it .

Code

Please log in to post a comment

Log in

Community feedback

  • khannfouad•230
    @khannfouad

    The issue is most likely coming from the 70vh you've set on the container. Different browser's view ports react in different ways when vh is concerned. Also it's a funky property that's why I like to avoid it.

    Solution will be to add a max-width property. Use 100vh on the body to center the container div. and remove height altogether from the container. Let your margin and padding handle the vertical length.

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi @ritujha19,

    Great job on your project! I have a few observations for your code that might help improve it:

    Add min-height: 100vh to the body to center the div. Remove the vh value and replace it with px values. Set the height to auto, and use max-height and min-height properties as needed. Additionally, remove the top margin. Hope this helps!

    Thank you!!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord