How to make it fit on every screen size and look perfect. If possible without making use of media query.
Joshtemi0
@Joshtemi0All comments
- @Joshtemi0Submitted 3 months agoWhat specific areas of your project would you like help with?@Joshtemi0Posted 3 months ago
How take it possible to get the real size with the design ?
0 - @Jorgel7202Submitted 3 months ago
- @polidorlSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Using flexbox and css-grid, projects can be responsive without using media queries. What I would do differently: work better on the css design and learn how to structure my html files.
What challenges did you encounter, and how did you overcome them?Could see that grids can be added within other grids, You can also use css-grid and flexbox in the same project. Always consulting Google Geminis (consulting artificial intelligence, AI).
What specific areas of your project would you like help with?Understand the difference between using the background-image property in the css file and the img tag in the html file. In general, learn how to structure the html file, using BEM technology.
@Joshtemi0Posted 3 months agoHi Lisbeth Emperatriz Polidor Solano
background image
is used in css whileimg
is for htmlhero { height: 50vh; background: url('./background.jpg') center/cover no-repeat; color: #fff; position: relative; }
while for img <img src=" image" alt=""img >
Hope this helps
}
Marked as helpful0 - @AKR2803Submitted 3 months agoWhat specific areas of your project would you like help with?
I need some review on my CSS, also should I be too worried about CSS or just go on to learn Javascript rather than perfecting HTML and CSS?
@Joshtemi0Posted 3 months agoYou should also learn
HTML
andCSS
for front end developer or is importantI think you will have to write a lot of code in
javaScript
to make it function as css so try leaninghtml
andcss
they are even easier to learn than javaScript.Hope this helps.
0 - @kalihari90Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This time I tried to use semantic tags like
,
,. I also put `display: grid;` & `place-content: center;`, `min-height: 100vh;` on the body for the centring purpose. I've learned how to use
& `` tags for images with 2 different file sources.Challenge was rather easy, so I'm gaining confidence with projects like that. So let's go to the next one!
What challenges did you encounter, and how did you overcome them?The main problem was the image formatting. I used Kevin Powell solution with and tags, which is alternative to standard solution with two different background-images from different sources.
- @AKdeBergSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I was careful of using the proper HTML tags. I studied which tags to use for which case and tried to use them appropriately rather than using all the time. I studied tags from https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
What challenges did you encounter, and how did you overcome them?I design for table using CSS was bit hard and customizing the list put me through some challenge.
What specific areas of your project would you like help with?- Plz let me know if I can improve anything about tags.Did I use appropriate tags?
- Is there anyway my css could be better?
@Joshtemi0Posted 4 months agoGreat Job
.card { background-color: hsl(0, 0%, 100%); width: 38%; overflow: hidden; padding: 2%; border-radius: 15px; }
I will advise you to stop using percentage for you side it should be in
px, rem, em
etc because it will be20%
of every screen size. So try changing it topx, rem
...And use midea query also for mobile sizing
Hope this helps
0 - @AKdeBergSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I was careful of using the proper HTML tags. I studied which tags to use for which case and tried to use them appropriately rather than using all the time. I studied tags from https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
What challenges did you encounter, and how did you overcome them?I design for table using CSS was bit hard and customizing the list put me through some challenge.
What specific areas of your project would you like help with?- Plz let me know if I can improve anything about tags.Did I use appropriate tags?
- Is there anyway my css could be better?
@Joshtemi0Posted 4 months agoGreat Job
.card { background-color: hsl(0, 0%, 100%); width: 38%; overflow: hidden; padding: 2%; border-radius: 15px; }
I will advise you to stop using percentage for you side it should be in
px, rem, em
etc because it will be20%
of every screen size. So try changing it topx, rem
...And use midea query also for mobile sizing
Hope this helps
Marked as helpful1 - @LarisaKampeSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
My first table ever, I never thought that I would make it but it was fun!
What specific areas of your project would you like help with?I did a bit of research about and elements and I think I figured it out but any feedback on this topic is more than welcoming. :D
@Joshtemi0Posted 4 months agoGreat job
But your mobile view is not the same as the given one
The is no margin for the mobile view Hope this help
Marked as helpful0 - @VincinChristmasSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that it didn't take me long to do this.
What challenges did you encounter, and how did you overcome them?I had some slight problems in CSS because I forgot to set the max-width. Perhaps my image is a little too big? It doesn't look good on desktop full screen. It is blurry.
What specific areas of your project would you like help with?image resizing
@Joshtemi0Posted 4 months agoNice
Viewing it on the web browser the image is perfect in sizing
But I case you are still looking for answer you can use
img { width: 2rem; or any other one you preferred one like px, %, just make sure they are the same height and width height: 2rem; }
Marked as helpful0 - @aelenehSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of being able to use responsive unit like rem for measurement. Which enhances responsiveness
What challenges did you encounter, and how did you overcome them?I'm always challenged with being able to get the right measurement for the width and pixels.
What specific areas of your project would you like help with?The responsiveness on mobile and desktop devices. I still do not understand the concept of media queries yet.
@Joshtemi0Posted 4 months agoGreat work
From the little I know
You can set the card in the center by using
.blog-content { position: absolute; top: 50; left: 50; transform translate(-50%, -50%); }
And for midea queries it will that more time to explain it here so hope this is helpful at this point.
0 - @VincinChristmasSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud that it didn't take me long to complete the project and I was able to do it without any help. I also learned about using new tools such as Figma. It gave me a chance to understand more about design files.
What challenges did you encounter, and how did you overcome them?I wasn't sure about the font-sizes to use. I had to guess on the font-size for the h1 element.
What specific areas of your project would you like help with?not sure when I should ever use px.
@Joshtemi0Posted 4 months agoGreat job
Not a problem using
px
. It is just that you will have to be using higher number in settingpx
. So for me I do userem
and it is easy to calculateHope this is helpful.
Marked as helpful0 - @code269Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Organized CSS to the best of my current ability
What challenges did you encounter, and how did you overcome them?Been a while since I've coded, a small difficulty was familiarizing myself with clean code practices and how to manipulate CSS again.
What specific areas of your project would you like help with?I would want tips on how to best write clean code, whether CSS or HTML. I would like to move forward with the learning path using good practices so that I can rebuild the habit of writing clean code for collaboration in the future.
@Joshtemi0Posted 4 months agoWow great job on the first work here
And to me your code looks clean 👏
1