Skip to content
OverviewSolutions
10
Comments
3

Tanguy

@OignonFugace140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Tanguy•140
    @OignonFugace

    Hi, Thank you because thanks to your question I just realized that I had a similar problem. After reading this stack overflow question (html - Overflow-x:hidden; on mobile device not working - Stack Overflow), I was able to find the solution which consists of setting the overflow-x property on both body and html tags. It works for me. I hope this can solve your problem. Have a great day.

    Marked as helpful
  • Tanguy•140
    @OignonFugace

    Hi,

    You are hard coding the height property on your sedans, suvs and luxury classes, such that the content can overflow the card if it is too big. Try to add overflow: hidden; to .content to see what happens.

    So changing the height to min-height would be a good start.

    I hope that helps.

  • Tanguy•140
    @OignonFugace

    Hi,

    As I've just completed the same challenge, here's my little contribution to yours :

    • It looks great !
    • As regard to mobile first design you will first style mobile design in the main section of your css file, then use @media screen and (min-width: 700px) to style desktop design. The advantage being that most of the time a larger proportion of properties are inherited by desktop styles from mobile styles than the other way around, hence using mobile first design reduces the amount of overriding properties you have to do in your media queries, among many other advantages.
    • Try using em and/or rem instead of hard coded px, as explained in this video : CSS em and rem explained #CSS #responsive - YouTube
      • That way you can specify a base unit font size in pixel in the body element (15px for this challenge), and apply modifications to this value later on. See example below.
      • To use at your advantage in mobile first design : you won't have to override all font sizes of all needed selectors in your media queries but only the body font size and everything will follow (great use of mobile first design by the way).
    body {
	font-size: 15px;
}

p {
	font-size: 1rem; // Paragraphs will be 15px.
}

h1 {
	font-size: 2.7rem; // h1 will be 15 * 2.7 = 40.5px.
}

@media only screen and (min-width: 700px) {
	body {
		font-size: 17px;
	}
	// Paragraphs will be 17px, without you having to specify it !
	// Then your h1 will be 17 * 2.7 = 45.9px.

}

    I tried to implement those advice in my challenge, feel free to check it :)

    I hope I'm not talking nonsense.

    See you.

    Marked as helpful