[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 337
  • Last Modified:

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.

http://bit.ly/ON0DqF

Thoughts?
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 4
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
.page-description, .button{padding:30px;}
0
 
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>
</div>

Open in new window

That should improve things.
0
 
Scott Fell, EE MVEDeveloperCommented:
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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
Understood - however adding padding: 30px to class button just makes the buton bigger.
0
 
Scott Fell, EE MVEDeveloperCommented:
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.

 

.page-description{padding:30px;}
0
 
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?
0
 
Scott Fell, EE MVEDeveloperCommented:
If you only need it on one page then remove it from your style sheet and in the head section of the page .

<style>
.page-description{padding:30px;}
</style>

The reason is you are using that class in other places.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now