i had problems with sizing espicially on large screen and i also could not crop some of the images as it is in the design
What specific areas of your project would you like help with?how to crop the "schedule to social media" image in the right?
i had problems with sizing espicially on large screen and i also could not crop some of the images as it is in the design
What specific areas of your project would you like help with?how to crop the "schedule to social media" image in the right?
Before using a reset CSS, you have to know what each style does. I learned this the hard way. This is the issue for your image not cropping:
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
The max-width: 100%;
is preventing your image being larger than the container. I made this mistake as well a few weeks ago for another project. You can either unset it or change the value if you need a max-width.
Example:
.overflow-image {
max-width: unset;
}
or
.overflow-image {
max-width: 30rem; // or whatever value you want
}
As for the image that need to crop past the bottom. Since you already have the overflow on the containers, we won't talk about that. Make the image position relative and add a top: [value]
and a negative top-margin: [same value]
to offset the difference. I'll take your code as an example:
.posting-img {
width: 75%;
align-self: baseline;
position: relative;
top: 2rem;
margin-top: -2rem;
}
This is specific to your code but you can unset margin-top at either tablet or desktop breakpoint using the same method to unset max-width
and just set the value of top to what you need since your grid set the row height to the tallest container.
Creating the pop up to share the social links
What challenges did you encounter, and how did you overcome them?when to use overflow hidden vs when not to use it.
What specific areas of your project would you like help with?tips on using the CSS overflow property
Looks accurate to the design.
As for overflow hidden, this is just a beginner's opinion but if you intent on having content going outside of the container other than the body, I wouldn't use overflow hidden. Otherwise, I would use it to make thing like components like these easier to code. However, in this component, using content overflow depends on where you put the popup in the html whether its in the container with the rest of the content or not.
I am most proud of the fact that I was able to correct the code in the footer and create a new section for the circles in the design after reviewing the code I wrote years ago when I first took on this challenge.
What challenges did you encounter, and how did you overcome them?I've encountered some bugs on the mobile design where the screen allows for horizontal scrolls. Still in the works of figuring out the issue.
What specific areas of your project would you like help with?I would definitely like help figuring out within my code where my issue to fix the horizontal scroll on the mobile design is explicitly happening.
I assume the horizontal scroll is because an element is wider than the viewport width. Instead of give fixed width to things, make the width responsive to the viewport width by using unit such as vw
which corresponds to the viewport width or %
which corresponds to the parent width.
based on the screenshot, it looks good but I can't get a closer look since the site is not found.
I'm most proud of the way I was able to incorporate the .svg file in my solution because this was the firts time using it as a background image, something that I thought was not posible. Next time I will try to not use absolute values to create the design.
What challenges did you encounter, and how did you overcome them?Trying to incorparate the .svg file in the solution was a challenge for me, first I try to use it as an inline component in my HTML but when I tried to round the borders with css I realized it was not posible, and I started to look for a different solution to my problem, until I found out that I could use the image as a backgound image.
What specific areas of your project would you like help with?I will love for some imput on how to make my code more compact. I think that I'm using too many lines of code to get to a solution.
What I notice is that you have some code that is either redundant or unnecessary. Fixing or removing those parts of your css will shorten your code significantly.
For example, in this section , you don't need to put both max and min width/height when simply putting height and width will do. In addition, you grid will naturally fill the available horizontal space so you won't need width.
Before:
.card_wrapper{
min-width: 100vw; // From this
max-width: 100vw; // From this
min-height: 100vh; // From this
max-height: 100vh; // From this
display: grid;
justify-content: center;
align-items: center;
}
After:
.card_wrapper{
height: 100vh; // To this
display: grid;
justify-content: center;
align-items: center;
}
Here you can just keep the width, the container will hug the height of the contents in the container.
Before:
.card {
background: var(--primary-color-white);
display: grid;
min-width: 327px; // From this
max-width: 327px; // From this
min-height: 501px; // From this
max-height: 501px; // From this
border-radius: 20px;
border: 1px solid black;
box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
padding: 24px;
}
After:
.card {
background: var(--primary-color-white);
display: grid;
width: 327px; // To this
border-radius: 20px;
border: 1px solid black;
box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
padding: 24px;
}
Once you clean this up, the four lines of code setting height and width will turn to one or two lines of code. This is not every but hopefully this gives you a clear idea on what you need to fix.
Have fun coding 😊.
I got somewhat of a better idea on how to size things properly
What challenges did you encounter, and how did you overcome them?Sizing the design with units like rem, em, svh and github pages wasn't in the mood to work that day :)
What specific areas of your project would you like help with?I would love to get some straight guidelines on how to size things, since the Figma Design says one thing and I hear all kinds of other suggestions.
How much should I trust Figma with the parameters it suggests?
This is not much a guideline but a personal opinion from a person who regularly uses Figma. You can trust the parameters IF the website design is static and will never change.
However, as you know, as coders, we must make the design responsive and accessible, so that many people from all over the world with unique devices whether its a phone or a computer can access the site/design/game or whatever.
So when looking at Figma and its parameters, you can use the values but maybe when you look at it, instead of using width: 40rem
from Figma for example, you can use max-width: 40rem
or width: (95%, 40rem)
to make it more responsive. Also, Figma tends to make everything display: flex
when the solution could be better solved as a display: gird
.
There are several YouTuber the I recommend on improving CSS but the one that I always recommend is Kevin Powell. He also has videos where he codes designs from this site so I can recommend him if you want so tips on CSS.
TL;DR: You can reference the values but don't copy everything that Figma puts for better responsiveness and accessibility.