help with CSS code please?

Printable View

11-02-2017, 09:40 PM
Catchy

help with CSS code please?

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

.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;
12-02-2017, 10:44 PM
dbgtz

Was this sorted
12-02-2017, 10:52 PM
Catchy

Quote:

Originally Posted by dbgtz

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!
12-02-2017, 10:58 PM
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.
12-02-2017, 11:02 PM
Catchy

Quote:

Originally Posted by 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.

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

Quote:

Originally Posted by Catchy

prob cos u have decent screen size/resolution i dread to think what it'll look like on a little netbook :D 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
12-02-2017, 11:20 PM
Catchy

Quote:

Originally Posted by dbgtz

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
12-02-2017, 11:39 PM
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 :)
13-02-2017, 11:42 AM
Catchy

Quote:

Originally Posted by 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 :)

I'd love you forever if you could <3
13-02-2017, 01:14 PM
dbgtz

Quote:

Originally Posted by 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 :)

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).
13-02-2017, 01:19 PM
Chris

Quote:

Originally Posted by dbgtz

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).

The age of the article is irrelevant, believe me the content of it IS relevant. Ids are too specific and create problems further down the line. They're great for javascript hooks and page anchors but not for styling. Do some research and you will find more on it.