Hello guys , so this is my second project and i got a problem with icons inside a div . When i try to move a icon up/down all of them move at same time . How do i stop that from happening . This is my project link : https://codepen.io/andreibratu/pen/jLPyLW
Well, they’re moving all at once because you have set them take 100% width. You can either change their width to take up less space, or change position static to absolute. (There are more ways to deal with this issue). I’d also recommend that you move your icons to another div.
@N4thyra Well , i tried with position absolute but it cuts the bottom of my background . Any way to prevent that from happening?
How are you trying to display the icons on the page itself?
- down the left or down the right side of the page
- side by side?
- across the top, bottom, or middle of the page
- one in each corner?
I personally have never used CodePen to design a webpage but i should be able to help you get the desired effect your are looking for with a little more information.
Im not entirely sure what you are trying to do and what position you want your icons to be in. Right now you have each one set at varying margin widths / heights and so they are kind of scattered. I removed position entirely, as well as all the margin height, widths that you set and the icons line up in a row.
The reason making a change will affect all icons is if you are adjusting a class that affects all icons, such as icons or fa. also, because of the way you have your positions set, when you change the margins on one, it will change others as well depending on how they are positioned in relation to each other.
I kinda get the feeling though that things started to get a bit complicated with your CSS while trying to acheve a certain effect. If you can explain the goal of how you want them to look then we’ll be able to offer up some advice to get you there
It looks like you may be trying to lay them on the desk top. Which would look nice, but If that is what you have planned, you will lose any responsive design for viewing on phones or smaller browsers.
The only way to do that properly would be using a photo editor and placing the images where you want them. Then map the picture points on your webpage so the links will exist over that area.
When adjusting web templates like CodePen, i find it easier to use in-line styling to override any style-sheets.
<h1 style="color:blue;">This is a Blue Heading</h1>
Example shown is from w3Schools,( a great place to refresh your memory or learn new tricks)
@marxspawn That’s exactly what i’m trying to do , lay them on the desk Can you point me towards a tutorial with the photo editor ? I just started this i’m not really good at it
I am not sure which OS you’re using, but any cheap image editing app should work.
Download the image you are using with the desk in it. Then find the icon images you want in .jpg format. Load the background then place the icons where you like. Save your new image.
You can map out your new image with Easy Imagemap Generator
Then simply copy the html code created to your html page
You can find some more reading about image mapping and how it works Here
*If you enjoy Dario Muller’s GitHub page (Easy Imagemap Generator) and find it useful, press the donate button and show some love *