Minor CSS Fix

I need to get it so there is some spacing around the "your cart is empty" and return to shop button on this page.


Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
If you only need it on one page then remove it from your style sheet and in the head section of the page .


The reason is you are using that class in other places.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
.page-description, .button{padding:30px;}
Julian HansenCommented:
That won't work as neither of those items is a button. One is just a <p> the other is an <a> inside a <p>

Increasing the padding on the <p> drops the Return to Shop to the next line.

My problem is that both of those items seem out of place where they are.

Question: This looks like a Word Press site - how much control do you have over the source generated - is there scope to change the markup of that page?

First up I would change this
style.css [Line 97]
h1.page-title {
  float: left;
  margin-right: 15px /* ADD THIS */

Open in new window

Then I would add this to the div containing those two items (style="margin: 0 0 20px 150px") I have done it inline but you can add a style if needed.
<div class="page-description" style="margin: 0 0 20px 150px">
  <p>Your cart is currently empty.</p>
  <p><a href="http://beta.kinerocellars.com/store/cart/" class="button">¿ Return To Shop</a></p>

Open in new window

That should improve things.
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That won't work as neither of those items is a button.
@julianH please look at the code, they are NOT buttons but the CLASS is called, "button". I think you just looked at it fast. I thought the same thing at first too.

The css code I posted just simply adds padding to BOTH classes, "page-description" and "button".  You can just as easily use Margin instead of Padding.  Although there is a difference in margin and padding, in this case it would probably be the same.  

Here is my css sample live http://jsbin.com/idahud/1/ and here is the same thing using 50px http://jsbin.com/idahud/2/

I think it will be easier for you just to edit the css.  I could have had 2 lines of css.  Instead, there is a comma between the two classes and that puts the same style to both classes.
Julian HansenCommented:
Understood - however adding padding: 30px to class button just makes the buton bigger.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You would be correct if it was applied to a.button but it wasn't and so actually you can get the same result with the even simpler.


catonthecouchproductionsAuthor Commented:
Padas - Thanks for that. Your solution worked great but it impacted a few other pages by doing that.

I went with .page-description{margin-top:50px; margin-bottom:20px;}

and it appears to work great. Any reason not to do so?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.