How to make it fit on every screen size and look perfect. If possible without making use of media query.
Joshtemi0
@Joshtemi0All comments
- @Joshtemi0Submitted 8 months agoWhat specific areas of your project would you like help with?@Joshtemi0Posted 8 months ago
How take it possible to get the real size with the design ?
0 - @Jorgel7202Submitted 8 months ago
- @polidorlSubmitted 8 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 8 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 8 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 8 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 - P@kalihari90Submitted 8 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.
- P@AKdeBergSubmitted 8 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 8 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 - P@AKdeBergSubmitted 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 months agoWow great job on the first work here
And to me your code looks clean 👏
1 - @Alfonso-1701Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Was able to get it finished in about 20 minutes.
What challenges did you encounter, and how did you overcome them?None.
What specific areas of your project would you like help with?Open to all feedback.
@Joshtemi0Posted 8 months agoA wow 🎉 for the 20 minutes finishing line
What I just notice is that it not positioned in the center And can help with that from the little I know
**Use this in your css
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); I hope this helps
0 - @Jorgel7202Submitted 8 months ago@Joshtemi0Posted 8 months ago
Great Job
Almost the same size with the original image
- But unable to hover and when the cursor is over the links it is not changing to pointer
Well thing I can help with that from the little I know
For example you used <nav> <div class="buttom">GitHub</div> </nav> In other to allow the cursor to change to pointer you should use " a " instead of the div that you used <a href="#" class="button">Github</a> And in the css The hover in front of the buttom means when ever the cursor is on ** top or over ** of the object .buttom:hover { background-color: rgb(196 248 42); color: rgb(20 20 20); } Hope this help you out
0 - @ogabrielfefSubmitted 8 months ago@Joshtemi0Posted 8 months ago
Congratulations 🎉 on completing you first
The height and the width is perfect even compared to mine on my first submit 😄😜
From the little I know
• After checking out your website and your code I noticed the last two line of code are outside the div of your container which make your ##name and the link jump outside of the content • Another thing I noticed is that you have a lot of " ids " in stead of " class. Class = " content " not id =" content " and you will use it in your css and " .Content " make sure you put the dot before the content (in case you have no idea before). The id is mainly or more useful in javaScript
Therefore use class name instead of id name
Hope it's helpful
Marked as helpful0 - @Melorin13Submitted 8 months ago@Joshtemi0Posted 8 months ago
Good Job
But you can try setting the height to auto or not giving it a property
Also try changing the name of your class name div0,1,2,3,4 and also give your h1and others a class name instead of using the like that in case of multiple h1s and others needing different properties in your code.
Also try giving your image some border-radius to make it look more like the given example like using img { border-radius: 5% }
Also try increasing your width too
Hope this help. Good Luck coding.
1 - @cschmidt2185Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm fairly new to web dev, so being able to write the HTML structure and CSS pointers without GPT or overflow got me hyped
What challenges did you encounter, and how did you overcome them?Initially, I had everything set in place and looked good, until i resized the window and everything distorted. After some research, changing all pixelated sizes to percentages helped with the distortion.
What specific areas of your project would you like help with?Despite my solution looking somewhat similar to the provided answer, I still think my ratios are off, and Im not sure it looks like what its supposed to look like when you resize the window. So help in that regard would be nice.
@Joshtemi0Posted 8 months agoFrom the little I know
First you should try and use external link for your css. And for the resizing of screen. You can use Media query and the normal one if your css is properly done
And also checking your code is saw outer-box which I don't know that it means, is a class for a <div> and container again in a <div>
<div class="outer-box"> (this ) <div class="container">To me you should leave only the container or outer-box than when giving it it properties you go like this width: 15rem; ---- This will give a specific width no mater the size of the screen instead of the % which will be the 20 percent of the screen even if the screen is 1px it will take 20% of the screen size also Do not use percent(%) use others like px, rem for your outer-box or container
I hope this solve the problem
0 - @Jorgel7202Submitted 8 months ago