Hello everyone! It's me again, with another challenge and questions. I'd like to ask, how do you keep your content responsive for mobile devices? I've tried a few steps, and it's probably because, in desktop sizes, I've given some width and height to the elements, but still is there any shorthand for like limiting the screen size to the contents size or something like that, if you know what I mean :D I've seen something like that. Still, I forgot it now and it's a bit messy around to look for the right content online. I'm having some difficulties from time to time. If there's someone who would like to explain it to me, I'd be very glad to hear him/her. Thanks in advance, have a nice one, everyone!
Hello @dogukan0055 congrats on completing this project
Your project looks great on the big screen but it is not responsive
To make your work responsive you have to change the direction of your cards and ratings to column because it is not possible for them to fit in a small screen as a row`
Also using a mobile-first approach which I used in the example above makes it easier for you to create a responsive site
Lastly, your CSS is very disorganized which makes it difficult to navigate
Your CSS code should have an order like this
Google fonts
reset CSS
root
body/ html
general styles (for example you may decide that all your p will have the same color so instead of repeating the colour you can do something like this p{
color: #fff;
})
min-height specifies the minimum height the body of your content should have
adding min-height to your body tag ensures that the length of your entire content shows and if your content length is more than 100vh the user will be able to scroll to see the entire content
For you to center your card with flex you have to add a height or min-height, you also need to add the justify-content property in addition to the align-items property
this is to ensure that your card is centered both horizontally and vertically
Also add a margin to the body so that the card will have some space from the body in a smaller screen
here is a tip on how to get the value from the custom input
Since the custom is a form input what you want to get is the value of your input
so you need to add an input event listener to it so that whatever you input you can get the value
example
customTipPercent.addEventListener("input", () => {
console.log( customTipPercent.value)// to see the value of the custom input
// the rest of your code goes here
}
````
I hope this helps
Hi All,
Any suggestions on how I can import the JSON data file into my javascript file as right now I have pasted JSON data in my .js file and then created a dynamic bar chart.
Thanks
Hello @Deepanshu-5288 congrats on completing this project
There are a number of ways you can import your JSON data to your js and use it without having to copy the whole file into your js
The most straightforward is async/await
where you use an asynchronous function to fetch the data and return a promise
so do something like this
const url = "data.json"
async function myimport(){
const response = await fetch(url);
const data = await response.json();
console.log(data)// do this to ensure that the data has been brought in
// The rest of your code
}
````
I hope this helps
hello @01Chloe nice job i particularly like the tweaks you made to the project
On screens > 960px the card looks ok, but on larger screen the contents of the cards are overflowing
So here is my suggestions instead of using grid throughout, you can use a combination of grid and flexbox
in your main container you can have two sections one for the cards and one for the user.
Display the main container to flex and give the user section a flex-basis of 23%
Then you can place all your cards in the second section and use the grid to create columns
EXAMPLE
main {
max-width: 1200px;
width: 100%;
display: flex;
column-gap: 2rem;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
sectionOne{
max-width: 20rem;
width: 100%;
flex-basis: 23%;
}
sectionTwo{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
place-items: center;
}
//the above is for desktop first if you want a mobile-first do
sectionTwo{
display: grid;
grid-template-columns1fr;
gap: 1.5rem;
place-items: center;
}
- this means you don't need a grid-template-row
Also avoid giving heights to your card container just give them padding and allow the content to determine the height, this will help prevent overflow
Finally, instead of using JS to change the background color of the active button you can use the CSS focus() pseudo class so
button:focus{
background-color: #444;
}
Then you can then use the active class only for the first button because it has to be on focus when the page loads
so
````
btnWeek.addEventListener('click', () => {
boxWeek.forEach(month => {
day.classList.remove('hide');
});
});
btnMonth.addEventListener('click', () => {
boxMonth.forEach(month => {
day.classList.remove('hide');
});
});
````
I hope this helps
Your code looks good except for the fact that it is not responsive
*** to answer your question ***
A clean code is basically, a scalable, maintainable, readable, and easy-to-understand code
So yes writing a clean code means writing a code that others can read
clean code does not always mean shortcodes, if writing short code means you have to cut corners and use certain hacks then don't write shorter codes because it will make your code difficult to read, understand and maintain
However, if refactoring your code to be shorter follows best practices and does not involve hacks and cutting corners then by all means write shorter codes
I tried to see why your site is not responsive but I could not access your GitHub so either the link is incorrect or the repo is set to private
I have difficulty for hamburger menu on mobile, as you guys can see if you visit the website, i can open (click the hamburger) and then mobile links show up, but if you click it again, it won't close. If you have the solution for my problem, please teach me.
@rain-riot nice work but here are some problems with your card and some tips on how to solve them
Your cards are not showing fully in fact on smaller screens i could only see two cards to fix this try this
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: hsl(0, 0%, 95%);
}
````
so instead of adding a fixed height of 100vh, your min-height should be 100vh in this way your card will not be below 100vh and if need be it will grow more than 100vh thereby allowing users to view the entire content
- second on smaller screens when the cards become a single column they are packed together because you did not give them a margin so add a margin-bottom to your cards on a smaller screen alternatively you can use the flex gap property so
````
.card{
gap: 1rem;
margin-bottom : 2rem;
}
Lastly on hover the text of your button disappears and is only visible when the button text itself hovered. This makes for a bad user experience so do not separate the link hover from the button hover try this instead
lastly do not put links in a button you either use a link or a button, not both so remove the link from the button and place the text directly in the button. In this way, you will not have to target the button and its contents separately like you did example
<button><a href="#">Learn More</a></button>`
- this should be
<button>Learn More</button>
````
I hope this helps
-the background color is meant to cover your entire body
and for the grey color to cover the entire screen you have to remove the width and height you set to the mainf container so instead of
.mainf{
width: 80vw;
height: 80vh;
margin: 4rem auto;
background-color: hsl(212, 45%, 89%);
display: flex;
align-items: center;
justify-content: center;
}
- why not do this
.mainf{
display: flex;
align-items: center;
justify-content: center;
}
- I removed the height, width, margin, and background-color
body{
margin: 4rem auto;
background-color: hsl(212, 45%, 89%);
}
- added the margin and background to the body element
i believe this will make your project more visually appealing but other than that your work is neat
I'm unsure of which is the body or div container properties. Is it the body that is light grey or there is a div container with that color? Are the width properties for the container or the body?
What's the best way to add a media query with the desktop width? Lastly, my image and favicon isn't showing on the live site even though the path is the correct one
Hello @OgunremiZainab
congrats on completing this challenge
to answer your questions
the light grey color is meant to cover the entire screen which means the light grey should be placed on the body element
body{
background-color: lightgray;
}
The width property determines how wide the content of your project will be so the width property should be set to the container element and not the body
main{
max-width: 375px;
width: 100%
}
````
- I recommend that you use mobile-first approach in most cases or all the time if possible.
mobile-first approach simply means designing the layout for the phone first and using media queries to change certain styles to suit bigger screens like tablets and desktops
- If you are using mobile-first approach, your media query will look like this
````
@ media screen and (min-width: 768px){
main{
max-width:700px;
width: 100%
}
}
````
- then if you are using a desktop-first approach your media query will have a max-width like so
````
@ media screen and (max-width: 375px){
main{
max-width:300px;
width: 100%
}
}
On the small screen your card looks great but on the large screen it does not, try setting the main container enclosing your contents to a max-width of 375px and a width of 100%, and also add a margin of 3rem to your body like so
if anyone can tell me how to display the icon view on hover without removing the image behind it would be appreciated. I tried several techniques but I couldn't find it.
