1

As the title says I have a <button> tag which has the CSS display: block; which should automatically make the element span the width of the container right? I have other buttons on the page but they are <a> tags but with the same css class as the <button> tag.

Website can be found here: http://www.cqwebdesign.co.uk/stirlinggrey/ as you can see each section as a button link at the bottom. However the one in quest is at the bottom of the page in the section with the title: "TO RECEIVE YOUR FREE GUIDE AND QUOTE"

Codepen version: http://codepen.io/anon/pen/zoOQQL

HTML:

<a href="#" class="btn">This is a button</a>
<button class="btn">This is a button</button>

CSS:

.btn {
  font-size: 16px;
  font-family: Open Sans;
  color: #fff;
  border: 0;
  background: #000;
  padding: 10px;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.5;
  display: block;
  margin-bottom: 10px;
}

Thanks

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Chudz
  • 160
  • 2
  • 17
  • So you want the submit button of the form to be full width? – Lee Nov 03 '16 at 14:20
  • I want it to have a max-width and then be full width if the screen size is below that max-width. If that makes sense? I have attached the code, minus the max-width CSS just for the example sake. – Chudz Nov 03 '16 at 14:22
  • 1
    then just add CSS media query for selected width – weinde Nov 03 '16 at 14:23
  • Then you want to use Media Queries, but first you need to get your button to be full width. I think it's getting pushed over by the floated divs above it. If you just have the btn class, it should be fully left aligned but it's not, there's top and bottom margin applied. – Lee Nov 03 '16 at 14:23
  • Or, you should create a new `row` class underneath the one with the form fields and put the button inside that. – Lee Nov 03 '16 at 14:23
  • 2
    `button` elements don't accept changes to the `display` property in some browsers. The answer here may help you: http://stackoverflow.com/q/35464067/3597276 – Michael Benjamin Nov 03 '16 at 14:24
  • 1
    Thanks Michael_B guess I still need to learn/remember some things :) I went with the extra CSS solution with width 100% just wanted to save the extra CSS. – Chudz Nov 03 '16 at 14:30

1 Answers1

-2

If your issue is that the button needs to be centred, you need to do clear: both; in order to clear it from being affected from the floated elements above.

Block level elements take up the full width, but it does not affect the width of the element itself. Use the width: ; tag to change this.

Hope this helps :)

SMoore
  • 1
  • 2