In the process of adding animation, I noticed that a scrollbar appears on the right side of the animated elements when the screen size is smaller(non-desktop versions) and I'm trying to search how to get rid of it, but I'm having a bit of difficulty figuring out how to do that. Is there a way to fix this?
i see your page and main has overflow-y: scroll when max width is 57em
@media(max-width: 57em) {
main {
overflow-y: scroll
}
}
I deleted it and scroll disappears.
I used position: absolute on the two images(bg-pattern files) to make the background.
I had to adjust their sizes and positions in media queries multiple times.
Is there a different way to use multiple image files to create the background of the website?
Also, I spent way too much time on my queries.css file and it became quite long. I was wondering if there are good tips to make the file look more organized and not so repetitive.
I've also noticed that on the phone, the mobile version of my website is super hard to scroll. Is there a way to fix this?
Hi, I saw your solution, for background image, i recommend the css property background to images because in those cases it is only decorative
body{
background:
url('../images/bg-pattern-top-desktop.svg'),
url('../images/bg-pattern-bottom-desktop.svg');
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
}
For mobile view, the reason is that you have double scrollbar, and i don't know what is the cause.
This is my repo This is my live.
But your work is great!, dont get down, you can do it, sorry this is not my native language
Hello! This is my first SASS project!
///(FIXED: setting display: block as inline style in the <img> tag)///
My question here is: when i change to the mobile version, the hero image does not fit properly in the container so it gets a purple border bottom (that is the background-color of the .img-area container). I set the img width to 100% and then:
.img__area { background-color: $soft-violet;
img {
object-fit: cover;
height: 100%;
mix-blend-mode: multiply;
opacity: .9;
}
}
Am i doing anything wrong?
I Would love to hear some suggestions and advices for this one :)
Thanks!
I had the same issue when i did this, you can fix it adding display block in the img. link
Bienvenida cualquier sugerencia. Gracias
Para centrarlo podrias ponerle un min-height al body de 100vh, tambien podrias darle el display flex al body, column y center a justify-content y al align-items. Ademas limita el width con max-width para que no se vea tan estirado
Tengo poco tiempo programando. Así que cualquier feedback sera bien recibido. Me costo un poco hacer el background por las diferencias de colores entre las diferentes partes del landing page. Al final creo que estoy progresando. Creo que no llego a 2 meses desde que empece a aprender programación.
¿Has visto el tema de la media querys para lo del responsive?, por otro lado se ve muy bien, a excepción de la img principal se ve un poco borrosa, y la letra se me hace un poco pequeña.
How can I do the functionality that I did with JavaScript with just CSS? (Hide/Show the answer to a question when the question is clicked)
I used js for this challenge too, but after reading about more pseudo classes, I think use the pseudo class focus maybe is a good approach.
What breakpoints should I always focus on to make sure I cover all my bases? I went for the bare minimum of the listed requirements 375 and 1440. Also why is my solution's screenshot not matching up what's on my local file? I inspected my page at 1440 x 1057
Hi. I'm not sure but, I use between 900px and 1050px for monitor, and start design with a 375px with for mobile.
I normally use flex for my layout, but thought I would give this challenge a go using grid. I had some difficulties with the fr unit for the grid-template-columns and I feel like my final solution might be odd as I used 2.1fr 1fr to try and get the text within the testimonials to match the design. Would appreciate any feedback. Thanks
I use grid areas for this challenge, I think it is more easy, for this case link
Do provide feedback if you feel there is anything that I can improve on. It will help me a lot.
you can set a max-width on grid_card, maybe 1000px.
