@AsongafacSubmitted over 1 year ago
I dont know why my image is white at the bottom, but i thin its pretty cool thou
Raul Rebolledo
@rrebolledo90All comments
- @rrebolledo90Posted over 1 year ago
In your body, set background-size to contain instead of cover, and add the background color #dfe6fb in the body and you should take care of that white space you mentioned.
Body { background-size : contain
background-color: #dfe6fb; }
0 - @souhailaharrakSubmitted over 1 year ago@rrebolledo90Posted over 1 year ago
Great job taking on this challenge. I noticed that you contained each card within one flex container. If you want to have Team Builder and Karma stack on top of each other, you can contain those two cards within a div and set that div to display flex, and then set the flex-direction to column. This will stack those two cards but will also contain all four of them as a horizontal row, as you had previously set that one with your one flex container. You can have multiple flex containers within one parent flex container. You can think of it as a big box. If you set a parent as a display:flex, there children can also have a box, that they can also contain other elements.
0 - @ReisLuizitoSubmitted over 1 year ago@rrebolledo90Posted over 1 year ago
Apply this and your background will stop repeating vertically.
Body {
background-repeat: repeat-x;}
0 - @Olarte910903Submitted over 1 year ago
I need help with the media queries, because if I see it on my laptop, it looks correct and works fine, but if I change min to max on mobile or desktop, everything is crashed. Exactly here:
<link rel="stylesheet" type="text/css" href="./mobile.css" media="screen and (max-width:375px)"/> <link rel="stylesheet" type="text/css" href="./desktop.css" media="screen and (min-width:1440px)"/>@rrebolledo90Posted over 1 year agoI think the issue you are encountering here is due to having two style sheets. When you resize the window the browser if displaying multiple style sheets on your webpage. That is why both images are showing when you resize your window, and why your content is shifting to different locations in the webpage (conflicting code). Generally, having two style sheets is ok, but not for a project this small. What you need to do is apply a media query at the 375px break point you designated on your mobile.css sheet on just one style.css file. A project this small would just need one html file and one css file. I also noticed that you tried to link the style sheets using the @media method, I don't have to much experience doing it that method, so it might have to do with that aspect as well.
Marked as helpful0 - @SirKaleSubmitted over 1 year ago
Hello. Here is my submission. I have been having rpoblems with responsive design as the image is shrinking and resizing and not staying fixed next to the card. I also had trouble with the button in placing it as well as importing the shopping cart icon. Feedback is very much appreciated regarding these and other quirks with my code that you may find. Thanks!
@rrebolledo90Posted over 1 year agoHey, I looked this over on my phone and your design is looking fine on a smaller screen. I’m thinking that the issue is the desktop version. I know that many users state that a mobile design should come first, but as a new developer that is really hard to do especially when you’re just learning. I think you should focus on getting the desktop version responsive and then you can work your way towards applying media queries at certain breakpoints when you notice your images not necessarily responding the way you would like them to.
Marked as helpful0 - @BiG-ADLERSubmitted over 1 year ago@rrebolledo90Posted over 1 year ago
Great job on this. I noticed that you added some individual margins on your main. You can achieve the same results if you remove the following.
main {
margin-left: 540px; margin-top: 250px;}
Add this to your body. In this case you want to use vw instead of height 100%
Body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Marked as helpful0 - @daisukeeitaSubmitted over 1 year ago@rrebolledo90Posted over 1 year ago
Hello, congrats on finishing this project. I noticed that you set your body image to the following:
Body {
background: url(images/pattern-background-desktop.svg);}
However, in order to achieve the same background you have to set it as a background-image. Try the following and apply your primary color to it.
Body {
background-image: url( ); background-repeat: repeat-x;}
1 - @kevinzehnerSubmitted over 1 year ago
Any Feedback welcome :)
@rrebolledo90Posted over 1 year agoGreetings, I think the main reason why you are having issues with your background img is because you applied it to your div:container. If you apply it to your body it should solve the issue. Try this:
body {
background-color: #dfe6fb; background-image: url( ); background-repeat: repeat-x;}
0 - @Emmanuel-AfrifaSubmitted over 1 year ago
I was finding it a bit difficult to vertically align the container in the center. I gave a specific height to the mobile version and used margins to align it. It worked but I want to know if there is a smart and better way to center elements vertically in the body.
@rrebolledo90Posted over 1 year agoGreetings, after looking over your code on dev-tools I marked some suggestions for you. I noticed that you used position-absolute to center your container. However, one easy way to center your container is to use the margin: 0 auto trick (as you can see below, this gives you the same results as using position-absolute and transform:translate).
Container {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 350px;
border-radius: 40px;
background-color: hsl(0, 0%, 100%);
}
Now, another reason why you can't move your container down is because you don’t have enough height on your parent element (in this case main being the direct parent). If you add the following it moves your container down.
Main {
height : 100vh;
Display: flex;
Align-items: center;
}
Hope this helps.
Marked as helpful0 - @jsr7kSubmitted over 1 year ago@rrebolledo90Posted over 1 year ago
Great job, if you add this color to your body you will match the design color perfectly.
body { background-color: #dfe6fb; }
0 - @LovethrechSubmitted over 1 year ago
I had problem with the importing of external font and the elimination of the line underneath an hyperlink.
@rrebolledo90Posted over 1 year agoHello, if you want to import the font’s there are two ways you can achieve this. The simplest way is to link the font directly into your index.html document (directly in the head). I saw that you added the Import rule into your CSS file, but it goes into the head of your html. You would use the following in the head.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">In your css file you would use the following to choose the Karla font.
{ font-family: 'Karla', sans-serif; }
The next way you achieve this is to use the relative feature. For example, you would download the fonts from google and use the following rule: you would have to add the specific fonts to one of your relative files.
@font-face {
font-family: Karla;
src: url(Fonts/Karla-Regular.ttf);
}
@font-face {
font-family: Karla-Bold;
src: url(Fonts/Karla-Bold.ttf);
Marked as helpful0 - @enn-deeSubmitted over 1 year ago@rrebolledo90Posted over 1 year ago
Hello, I noticed that your background image is repeating vertically. The reason for this is because you have to set the background image to stop repeating as they repeat on default. If you include this in your body it should fix your issue. The reason that you want to set it to repeat on the x axis is because you want it to repeat horizontally instead of vertically. Add the background color and it should look smooth. Hope this helps.
body {
background-color: #dfe6fb;
background-image: url(pattern-background-desktop.svg);
background-repeat: repeat-x;
Marked as helpful0
