talentlessDeveloper
@talentlessDeveloperAll comments
- @hectorjbd@talentlessDeveloper
Hi,
Nicely done project!
As for the white box, you can begin with adding these properties to your alert_info class.
.alert_info { position: relative; background: #fff; border-bottom-right-radius: 0; }
Then you can create a new div inside or use the ::before pseudo element let's say you created a new div inside .alert__info, add these properties to the div.
position: absolute; width: 0; height: 0; border-top: 22px solid #fff; border-left: 22px solid transparent; right: 0px; bottom: -14px
You can adjust the values to fit your preference.
if you want to learn how to create shapes using css, here is a link Css shapes.
Marked as helpful - @devwinner-sek@talentlessDeveloper
Hi @devwinner-sek,
It's actually not necessary you use media queries as everything is centered.
You can add margin:0 to the body to remove the default margin on it so that everything is properly centered especially on mobile view.
Also you should add padding-bottom to your container as some of the contents are hidden.
This is impressive work, welldone
Marked as helpful - @AlyferJT@talentlessDeveloper
Impressive!
- @tayk6ix@talentlessDeveloper
This is impressive! welldone
- @tayk6ix@talentlessDeveloper
hi @tayk6ix, Something is off, seems like you hosted your readme instead of the live site. Try and upload the real project itself.
Marked as helpful - @SindhujaBandaru@talentlessDeveloper
Hi @SindhujaBandaru,
Move your media query to the bottom of the page.
then in your media query you should add
@media screen and (min-width: 62.5rem) { .sed { border-radius: 10px 0 0 10px; } .lux { border-radius: 0 10px 10px 0; } }
then outside of your media query your .sed and .lux class should have a border-radius of
.sed { border-radius: 10px 10px 0 0; } .lux { border-radius: 0 0 10px 10px; }
This should fix your border-radius problem. welldone!
Marked as helpful - @Bojan227@talentlessDeveloper
@Bojan277 the desktop version is great! but using desktop approach first means your mobile version is going to inherit values from desktop.
I don't know how the mobile version looks like but i believe it shouldn't be more than stacking upon each other.
So in your media query for your mobile,
- add padding to your container.
- Remove the left and right margins you added to H1 and p tags.
- text align center your code.
- Instead of a 35vw for your right box change it to 100%.
- Also reduce the font for your h1 tags and placeholders too.
goodluck
Marked as helpful - @shuree0331@talentlessDeveloper
@Shuree the nav on my device looks awesome, welldone.
- @Albusflames@talentlessDeveloper
Hi Oluwafemi,
add a before pseudo class to your anchor tag something like this
a::before { display: block; content: ""; position: absolute; top: 0.6875rem; left: -0.25rem; width: 108%; height: 0.4375rem; opacity: 0.6; border-radius: 10px; z-index: -1; background-color: yellow; }
you can adjust the values and background-color as you see fit.
Welldone!
Marked as helpful - @Ezmad-Ze@talentlessDeveloper
For a first responsive site, this is great!
- @shuree0331@talentlessDeveloper
Hello Shuree, the desktop version looks good! I'm guessing there's no mobile version. Also the width of the nav overflowed on my desktop using 100vw instead of 100% made it work fine.
welldone!