mark_pherz• 450
@mark-pherz
Submitted
What's up community!
I need your help: I have struggled with two color curved background and couldn't find the answer how to make it. I will be grateful if you help me to figure out how to make that background.
Ambadi M P
@Soaphub
All comments
- Ambadi M P• 380
@Soaphub
Posted
Hello mark_pherz, great work and keep coding and have fun. I reviewed your code in GitHub. The background is not two-colour curved. It's an image placed on the background colour (--very_pale_blue: #f5f7ff) and the images are in your images folder. There are two images one for the desktop view (pattern-background-desktop.svg) and the other one for the mobile view(pattern-background-mobile.svg). You could follow the following steps in the stylesheet to get it right.
- Move the bg colour from .wraper to the body tag. So the bg colour will be filled in the background of all elements. Even height: 100% or 100vh to take the size of the window screen.
- Now you could add an image through .wraper div using background-image: url("the location of desktop image"), add width:100% to cover the width screen and height how much ever you want. The .card div would have displaced.
- Finally, you could add position: absolute to .card div to make it like a popup card. Then add left: 50%, right: 50% and transform: translate(-50%, -50%) to make it in center of the page.
- To change image in mobile view, use media queries for responsive websites. Even you can reduce card size or image size in different breakpoints and avoid content overflowing out of the screen. eg: @media (max-width: 991.98px){ .wraper{ background-image: url("the location of desktop image") } }. Check W3School to know more about media querry.
Marked as helpful
0 - jtatan17• 20
@jtatan17
Submitted
I had issues at the time of using the font family. I mean when I used google fonts the font was either too boold for the <p> tag or not bold enough for the <h1> tag. It would be useful a little guide about what exact font we should use.
Ambadi M P• 380@Soaphub
Posted
Hello jtatan, great work. I would love to provide a suggestion on Google fonts. Reviewed your code in index.html. Found u have copied the link from google fonts with only a font weight of 800.
- You can select different font-weight such as 300, 600 and 900 from the google fonts webpage. Then copy the link finally so that all font-weight is included in the same link.
- In the style sheet, you could add the same font weights for the heading tag and para tag. Use font weight 900 for bolder text, 600 for medium text and 300 for regular text. In your code, you could use 900 or 600 for h1 tag and 300 for p tag.
Marked as helpful
0 - aimee• 50
@aimeempereira
Submitted
I couldn't add the svg icon through css and could only paste it on HTML, but I'm not sure why.
Ambadi M P• 380@Soaphub
Posted
Hello Aimee, I reviewed your code you copied the HTML element <svg> from the website which could only be used in index.html. If u want to place an image through CSS, you have to download the SVG from the website. Then place it in your project folder. Then follow any of these steps.
- You could use <imag> with atribute src="the location of svg" in index.html.
- Add a div with class then update the file location of the image in CSS. But don't forget to add the width and height or else the image won't be displayed. eg: .class{background-image: url(location of image);} For further reference, you could refer freeCodeCamp
0 - Musyoka Sila• 240
@sila254
Submitted
Unsure if there is a box shadow. Difficulty in entering the image once in the div element.
Ambadi M P• 380@Soaphub
Posted
Hello sila98, well done all looks good.
-
I could see a box shadow in the design. If u want any u can add them to the class .container, using property box-shadow: h-offset(px) v-offset(px) blur(px) spread(px) colour;. Look at w3schools for more details on box shadow.
-
The method you used to select the image element is correct. There are many ways and the order in which the style is prioritized as higher to lower is given below. The higher order overrides the lower one.
- You could add an id or class to the image tag.
- Use a hierarchical selector, the one you used. eg * .container img*
- Finally the hierarchical selector using elements i.e div > img.
- Final suggestion, you could use media queries for responsive websites. So you can reduce size in different breakpoints and avoid content overflowing out of the screen. You have been using the same size for all screens. eg: @media (max-width: 991.98px){ add the styles here}
Marked as helpful
0 -
- Mudasser Khan• 50
@Mdxr
Submitted
Everything is looking Good except the shadow color and mobile views under 320px
Ambadi M P• 380@Soaphub
Posted
Hey Mudasser Khan, great work and keep trying for a better responsive website. The website looks good, I can add some suggestions which I am following. You can try it.
- I reviewed your index.html page and found the use of an internal style sheet which was fine. But I highly recommend an external style sheet for an easy understanding of CSS hierarchy.
- You could media queries for responsive websites. So you can reduce size in different breakpoints and avoid content overflowing out of the screen. You have been using the same size for all screens.
- Add all common styles like flex-direction, text alignment etc... below screen size 991.98px where the grid pattern changes. eg: @media (max-width: 991.98px){}. Then for more specific styling like the width of image text use the below breakpoints.
@media (max-width: 575.98px) { ... } // Small devices (landscape phone) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablet, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // X-Large devices (large desktops, 1200px and up) @media (min-width: 1200px) and (max-width: 1399.98px) { ... } // XX-Large devices (large desktops, 1400px and up) @media (min-width: 1400px)Hope it was helpful...
Marked as helpful
0 - Koi Hastilow• 90
@KoiHast
Submitted
Okay, I'm going to come straight out of the gate and say I have NO IDEA what I'm doing for the middle area of the screen width. It looks good at 1440px. It looks good at 375px. Anything in between, I'm clueless. I tried for hours to get it to work before eventually giving up and turning to you guys. Can anyone help me with figuring out how to make it not look terrible in those middle sections? Thank you!!
If you're wondering what I'm talking about, go to Chrome's inspection tool, go to responsive mode, set it to 1440px, and just... slowly shrink it. It's terrible. I know it's terrible. You'll know it's terrible. I'm having a painful learning experience right now.
Ambadi M P• 380@Soaphub
Posted
Hey Koi Hastilow, great work and keep trying for a better responsive website. The website looks good, I can add some suggestions which I am following. You can try it.
- I reviewed your index.html page and found all the icons in the <main/>, you could place that in the <footer> which makes it typical and easy to bifurcate the page. The footer can contain the address and contact info.
- In the CSS stylesheet it is better to avoid fixing the height to 100vh. Don't worry about the height, users love scrolling.
- In the media query I found u repeating classes .content .text .main to make the flex direction colomn. If you want a more responsive website. There are some default breakpoints below, choose which is required.
- Add all common styles like flex-direction, text alignment etc... below screen size 991.98px where the grid pattern changes. eg: @media (max-width: 991.98px){}. Then for more specific styling like the width of image text use the below breakpoints.
@media (max-width: 575.98px) { ... } // Small devices (landscape phone) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablet, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // X-Large devices (large desktops, 1200px and up) @media (min-width: 1200px) and (max-width: 1399.98px) { ... } // XX-Large devices (large desktops, 1400px and up) @media (min-width: 1400px)Hope it was helpful...
Marked as helpful
0 - Ecyla• 20
@ecy16
Submitted
Could someone explain to me how to make the image visible?
Ambadi M P• 380@Soaphub
Posted
Hello Ecyla, I reviewed your git hub repository for the project QR-code-image. There was no image folder with an image file, hence the image was not visible. You could do the following steps to get the image.
- Add an image folder to the project and move the image file given by the frontend Mentor into it.
- Then change the src attribute of the image tag to "image/image-qr-code.jpg".
Marked as helpful
0
