@beqarion
Submitted
@OignonFugace
@beqarion
Submitted
@OignonFugace
Posted
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
@AbibGuardian50
Submitted
How to make the button not come out from the card when the card is being zoomed?
@OignonFugace
Posted
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.
@xyzeez
Submitted
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🚀:
As always, Happy Coding!👨🏽💻
@OignonFugace
Posted
Hi,
As I've just completed the same challenge, here's my little contribution to yours :
@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.em
and/or rem
instead of hard coded px
, as explained in this video : CSS em and rem explained #CSS #responsive - YouTube
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