@developertarik
Submitted
I tried to make the share button a lot, I couldn't do it, can you help me, how can I do it? I don't have any knowledge about javascript yet.
@Fernando0654
@developertarik
Submitted
I tried to make the share button a lot, I couldn't do it, can you help me, how can I do it? I don't have any knowledge about javascript yet.
@Fernando0654
Posted
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
and em
. 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 these
If 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 JS
Good luck and good coding 👍
@CamiloGav
Submitted
Hello everyone! Thanks in advance for checking my code ... question: how could I have added a blue background to the eye image? I did not find the solution.
Greetings from Argentina
@Fernando0654
Posted
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 fine
content: " ";
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 work
Marked as helpful
@jlcesarr
Submitted
Hello friends. I'm new to the front end. I had some difficulties in carrying out this project.
My main difficulties were:
1 - Overlay the view icon over the main image, I made the code below but I couldn't resize the icon (svg) without making changes to the background-color. Since the card__image--hover
was positioned absolutely relative to the div card__images
.
2- Align the main/container card to the middle of the page
.card__images {
position: relative;
width: 100%;
grid-column: 2 span;
}
.card__image {
width: 100%;
border-radius: 16px;
}
.card__image--hover {
display: none;
}
/* img.card__image:hover+img.card__image--hover {
position: absolute;
display: block;
opacity: 0.5;
height: 100%;
top: 50px;
top: 0;
width: 100%;
height: 100%;
padding: 200px 200px;
z-index: 1;
background-color: hsl(178, 100%, 50%);
}
*/
I accept any kind of feedback, thanks for your attention.
@Fernando0654
Posted
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 use position: absolute
and then top: 50%
& left: 50%
along with transform: translate(-50%, -50%)
. Of course, this only will work fine on desktop sizes. On mobile use something with margin: auto
and it'll get done almost like magic.
Also, I don't recommend using px
with the padding
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
property
Then write width: 90%
, max-width: 500px
and margin: auto
and it should be work
@pratyush1100
Submitted
idk why but the transition is not getting applied to the equillibrium image.
@Fernando0654
Posted
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 the top
div and not the img
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
Submitted
I would appreciate your feedbacks
@Fernando0654
Posted
👋 It's not fitting well on my mobile device, the content is not center. I recommend to you using width: 95%
along with max-width: *some value in px*
and margin: auto
on your main tag or wrapper
Marked as helpful
@a-dri-an-S
Submitted
Any general feedback is appreciated!
@Fernando0654
Posted
👋 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 error
Hope this can help ♣︎
@NinjaAniket
Submitted
@Fernando0654
Posted
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
i used react and styled-component as libraries in the front end to see how it would work in a "real" project but being a small project i think i overdid it when creating components. i ended up creating more js files than i should have, how would i solve this if i used the same technologies?
@Fernando0654
Posted
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
Submitted
@Fernando0654
Posted
On the total section it gets overflowed. I recommend to you using .toFixed(2)
method to change 1.5899999999999999 for 1.58
Hope it helps you!
Marked as helpful
@mikhael-oo
Submitted
Please provide general feedback on what I could do better in this project. I just started with web development and it would do me a ton of good to know how I could better grow in my journey of learning. Thank you.
@Fernando0654
Posted
👋 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
and width: 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 device
Good luck, browww.
Marked as helpful
@soumya495
Submitted
Hey Everyone this was the first time attempting a challenge using React JS, It was really confusing at first but I somehow managed to work my way around It. Please provide your kind feedback and also if there are any other way of deploying a React project ?
@Fernando0654
Posted
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
Submitted
Hi folks I tried to insert de bakcground-image, but it didn't work. I think there is a problem with my .svg image. Could someone help me with this problem? body { background-image: url(..images/bg-pattern-top-desktop.svg), url(..images/bg-pattern-bottom- desktop.svg); background-position: bottom 50vh right 52vw,top 50vh left 50vw; background-repeat: no-repeat, no-repeat; ... }
@Fernando0654
Posted
To get a good background position I'd suggest using a div
with width
and height
along with the img
tag and other properties like position fixed for example
To 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