help with CSS code please?

[Catchy]

hi so I'm designing/coding a website and am stuck! Basically have two buttons which are nicely arranged on my screen but when I test on different resolutions etc they're literally all over the place. What am I doing wrong? Can someone pleaseeeee help me. Will mediaqueries help?

here is the website

www.imjacob.co.uk

here is the css for one of the buttons

Show Hide

.button2 {
align-items: center;
float: right;
display: block;
margin: auto;
width: 150px;
height: 40px;
margin-top: 20%;
margin-right: 450px;
border: 4px solid;
border-color: darkturquoise;
border-radius: 200px;
text-align: center;
line-height: 40px;
font-size: 16px;
font-weight: 600px;
font-family: sans-serif;
font-style: bold;
text-decoration: none;
background-color: transparent;
color: darkturquoise;
box-shadow: 0px 0px 0px lightgrey;

[dbgtz]

Was this sorted

[Catchy]

Was this sorted

NO tom am having such trouble it must be such a simple fix but cant seem to fix???? I've sort of got it.... they now dont move when I resize my web browser but on iphone they look shocking... how does it look on your computer screen pls? uploaded new files to the url www.imjacob.co.uk let me know lol and also edited the css code a bit i might jus give up frustrating me 2 much


its all the positioning i cant cope with!

[dbgtz]

Ye looks fine (at least what I think you're going for)
By the way seems like it would be more suitable to use id rather than classes for most, if not all of the elements.

[Catchy]

Ye looks fine (at least what I think you're going for)
By the way seems like it would be more suitable to use id rather than classes for most, if not all of the elements.

prob cos u have decent screen size/resolution i dread to think what it'll look like on a little netbook and ok cool, can you explain diff between them and why it matters as such? im v new to code tom lol xx

[dbgtz]

prob cos u have decent screen size/resolution i dread to think what it'll look like on a little netbook and ok cool, can you explain diff between them and why it matters as such? im v new to code tom lol xx

id = used only by one thing
class = used by many things

tbh its aligned to the left on mine which idk if that's intentional or not

[Catchy]

id = used only by one thing
class = used by many things

tbh its aligned to the left on mine which idk if that's intentional or not

no want it center ffs

[Chris]

The absolute positioning is whats causing the issues. Im not sure exactly what you're trying to achieve overall but as it stands the buttons are fixed in place which I'm assuming you don't want.

Also try and avoid using ids all together and stick to classes. Ids are too specific and can cause a styling nightmare if things get more complex. This does a decent job of explaining it: http://oli.jp/2011/ids/

I can fix for you tomorrow if no one else does

[Catchy]

The absolute positioning is whats causing the issues. Im not sure exactly what you're trying to achieve overall but as it stands the buttons are fixed in place which I'm assuming you don't want.

Also try and avoid using ids all together and stick to classes. Ids are too specific and can cause a styling nightmare if things get more complex. This does a decent job of explaining it: http://oli.jp/2011/ids/

I can fix for you tomorrow if no one else does

I'd love you forever if you could

[dbgtz]

The absolute positioning is whats causing the issues. Im not sure exactly what you're trying to achieve overall but as it stands the buttons are fixed in place which I'm assuming you don't want.

Also try and avoid using ids all together and stick to classes. Ids are too specific and can cause a styling nightmare if things get more complex. This does a decent job of explaining it: http://oli.jp/2011/ids/

I can fix for you tomorrow if no one else does

That's almost 6 years old and can hardly be described as solid evidence. There's lots of unnecessary repeated definitions because he's using two or more classes rather than splitting it into class and ids (I can only see 2 lines that are different between .button and .button2 out of 21 lines).