
Fernando FeN
@Fernando0654All comments
- @developertarik@Fernando0654
It's alright, everyone here we are learning and improving.
First of all, you need to improve your CSS skills. Try to not use too many pexels, instead use
vw
,vh
,rem
andem
. I see in your code you use height property with pexels, this isn't a good idea. There is plenty of articles and videos explaining how to use theseIf you want that the button show the pop-up menu, use the
:hover
state. It's not the same but it will allow to complete this challenge without JSGood luck and good coding 👍
- @CamiloGav@Fernando0654
Right now, as you have your css, replace this to your
.img-container::before
. You can do this by inspecting elements first to see it works finecontent: " "; position: absolute; opacity: 1; background-image: url(./images/icon-view.svg); background-position: center; background-size: 20%; height: 100%; width: 90%; background-repeat: no-repeat; background-color: blue; border-radius: 10px;
Of course, on background-color add the right color, I just wrote blue because I don't remember the color.
Good luck, though
Update: Don't forget to add space on
content: " "
, otherwise it won't workMarked as helpful - @jlcesarr@Fernando0654
I recommend to you using a
max-width
property to avoid content gets too large. It looks too large on my desktop, Regarding to set content on the center, point 2, I useposition: absolute
and thentop: 50%
&left: 50%
along withtransform: translate(-50%, -50%)
. Of course, this only will work fine on desktop sizes. On mobile use something withmargin: auto
and it'll get done almost like magic.Also, I don't recommend using
px
with thepadding
property because it will create you troubles. Instead, use em so they'll get a better response on big and small screens.Regarding to your 1 point, hope you find the answer. What I did with this one was to work with a
filter
css property when hovering along with the svg eye.Good luck!
Update: If you don't want to use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%), you can do this to your
main
tag and it will work in your code to solve your problem:Get rid of the
min-width: 100vw
propertyThen write
width: 90%
,max-width: 500px
andmargin: auto
and it should be work - @pratyush1100@Fernando0654
The reason of your trouble is that
top
class is over the img, which has the hover state. So, it's not hovering because when you put the cursor over the img, actually you're hovering thetop
div and not theimg
Hope this can help you. Also, use a
main
tag to wrap the main content of the page. This will fix your accesibility issues - @tahakhairy@Fernando0654
👋 It's not fitting well on my mobile device, the content is not center. I recommend to you using
width: 95%
along withmax-width: *some value in px*
andmargin: auto
on your main tag or wrapperMarked as helpful - @a-dri-an-S@Fernando0654
👋 Heyo! It's positioned to the left on mobile device, also I don't recommend to use too many
px
on your css. This may be the cause of your errorHope this can help ♣︎
- @NinjaAniket@Fernando0654
Heyo! The "Can I cancel my subscription" section has a bug. The answer it's positioned to the right on mobile device
Good luck on fixing this 👍
Marked as helpful - @Starlk@Fernando0654
I think there's nothing wrong with using small modules, it sets the basis for a scalability in case you want to grow your project
On the other hand, it's not responsive. It doesn't fit well on my mobile device.
Hope this can help you to fix this ♣︎
Marked as helpful - @vandnasharma26@Fernando0654
On the total section it gets overflowed. I recommend to you using
.toFixed(2)
method to change 1.5899999999999999 for 1.58Hope it helps you!
Marked as helpful - @mikhael-oo@Fernando0654
👋 Hey! I saw you used
max-width
property with%
. This isn't a good idea because it will get smaller on smaller screen sizes. The best way of doing this is:max-width: 600px
andwidth: 95%
for example. This way, it's not gonna grow more than 600px on bigger screens and it'll be 95% on any kind of mobile deviceGood luck, browww.
Marked as helpful - @soumya495@Fernando0654
You can use this commands to deploy your React App when using webpack and babel. It's super easy and it helps to improve the performance
"scripts": { "dev": "webpack serve --open --config webpack.config.js --mode development", "build": "webpack --mode production --config webpack.config.js", "deploy": "gh-pages -d dist", }
-
With
dev
, it opens you a server similar to run when you're developing -
With
build
, web webpack creates for you a folder with the name, usually, 'dist' -
And finally, with
deploy
, I use a package of npm called gh-pages that publish the project website live for you in Github
This is the way I do this. Hope it helps you ♣︎
Marked as helpful -
- @jsmeyring@Fernando0654
To get a good background position I'd suggest using a
div
withwidth
andheight
along with theimg
tag and other properties like position fixed for exampleTo avoid any accessibility issues when adding these tags that I mentioned, don't forget to add the attribute
aria-hidden: true
Something like this:
<div class="img-right"> <img src="path"> <\div>
I hope this can help you, man. I did this on my last upload and worked well
- @Nafsuki@Fernando0654
I usually have lots of issued with attributes and html when I use React, so I don't think it's to different with Next.js. Maybe there's someway to fix this, but honestly I haven't achieved that using React
Good luck, though. I know this isn't helpful haha :c
- @Ed149@Fernando0654
Hey 👋 The design it's not fitting well in my mobile device
On the other hand, to avoid the "one main landmark" accessibility issue, you need to wrap anything inside your body according to the three main landmarks which are:
header
main
footer
Hope this is helpful. Good luck ♧
Marked as helpful - @DinaRocio@Fernando0654
Regarding to accessibility issues, I'd recommend using
header
,main
andfooter
as parent elements and only body child elements to avoid this accessibility issues ♧About your question, I use scss so I'm not the right person to answer that
Good work, btw
Marked as helpful - @sylla156@Fernando0654
On mobile device, Crew Section image doesn't fit well. The image covers the bullet element, so I can't even see the other guys
Hope this can help. Best of luck ♧
Marked as helpful - @SimoniacJewel88@Fernando0654
I cannot see the whole content on mobile device. I was checking your scss, I didn't see the error though c':
On the other hand, I'd suggest not using too many
px
, specially on parent elementsHope this helps ♧
Marked as helpful - @anoshaahmed@Fernando0654
I think it's because of the
h2
element, beforeh1
. You have h1, h2 and h3 but they are not in a sequentially-descending orderGreat work, btw. Love when fits so well in the design / solution window
Marked as helpful