Streaming live at 10am (PST)

How to accurately place png elements?

#1

Hi-

So attached below is a simple design I did in photoshop. I have a few elements I want to place on a gradient background and animate them. My question is what is the best way to go about laying them out so they are placed correctly on all/most browsers and be responsive to mobile etc.

I have a bit better than a basic understanding of how html/css works I just am asking for some guidance to do this right the first time. Played around with this a bit and items weren’t lining up properly, especially not for ipad and mobile.

For example, the mountains and the bridge are separate elements. I want them to fly in on page load from off screen and land exactly how they are shown below.

Right now I have a section and a div acting as the background color and gradient. the width is set to 100% and the height is set to 1080.

I got the logo to center ok, that was easy, but im struggling to get the mountains and bridge to line up right, especially once its in mobile.

The mountains and bridge are 800 px wide, should I make a container for them first as a div thats 800 wide and use some sort of percentage inside the container? Should the container be relative then use absolute placement?

Will I just have to reposition these elements no matter what for ipad and mobile? Thats fine I just need to know if thats the right way or if I am doing something wrong.

I just want to make sure that if you scale your browser everything still looks right, I am sure there is a proper way to do all this, thanks in advance!

#2

I am no expert (far from it) and have also struggled with placements of elements - there are quite a few videos online about this though - also pixelgeek did a demo on doing something similar - although not about what you mention - this might help https://www.youtube.com/watch?v=x-vvcZlF_4A&t=0s&index=18&list=PLPmnoMVpkxfhas-MolVP-Ys_fyOTgTqnt

#3

@brando @cyberdave any thoughts? Thanks!

#4

Please share a link to your read-only project so someone can look at what you have (in webflow) and give you feedback.