Skip to content
OverviewSolutions
10
Comments
3
Tanguy
@OignonFugace

All comments

  • Tanguy•140
    @OignonFugacePosted over 1 year ago

    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
    2
  • Tanguy•140
    @OignonFugacePosted about 2 years ago

    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.

    0
  • xyzeez•670
    @xyzeezSubmitted about 2 years ago

    This challenge was pretty much straight forward and fun. I had a bit of challenge animating the hover state for the hyperlink text (.btn class in my code) but was later able to achieve it by adding a pseudo element ::after.

    Here is how I did it:

    HTML🏷️:

    <a> TEXT </a>

    CSS 🎨:

    a {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

a::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

    Then you can add the transition and set property for color on the anchor tag and transform for the ::after.

    Your feedbacks and suggestions are highly appreciated!👍🏽

    UPGRADES🚀:

    • Improved accessibility
    • Animation

    As always, Happy Coding!👨🏽‍💻

    Responsive 3 Column Preview Card [Pure CSS + Animation]

    2
    Tanguy•140
    @OignonFugacePosted about 2 years ago

    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
    0