0

I'm trying to make what I thought would be a minor change to the CSS / SCSS in Bourbon in my Rails 4 website.

I'm simply trying to create more margin between my submit button and the "go back" link. At the moment the two elements are too close together as shown in the image below:

enter image description here

I've tried to solve this in a number of ways, both using my own standalone style sheet and within the Bourbon "source code" itself.

First I attached this class and tried this in my own plain app.css file, but element only shifted right slightly, no top margin:

.go-back-link {
  margin: 20px 20px 20px 20px;
  }

Then in Bourbon's _typography.scss file I tried adding margin to the a section, again no result:

a {
  @include transition(color 0.1s linear);
  color: $base-link-color;
  text-decoration: none;
  margin: 20px;

  &:hover {
    color: $hover-link-color;
  }

  &:active, &:focus {
    color: $hover-link-color;
    outline: none;
  }
}

Third in _variables.scss I tried changing the line height property from 1.5 to 2, but this changed everything else on the page but has nothing to do with the a link element:

// Line height
$base-line-height: 1.5;
$header-line-height: 1.25;

Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!

neo5_50
  • 466
  • 1
  • 5
  • 19
  • 1
    This is not a Sass problem, this is a CSS problem. There is not enough code here to reproduce anything. – cimmanon Sep 11 '15 at 10:56

2 Answers2

-1

try using !important, for example : 

 margin: 20px !important;
Radek Snarski
  • 1
  • 1
  • 2
  • Where? In my own regular app.css file? – neo5_50 Sep 11 '15 at 09:59
  • yeah try it in app.css : .go-back-link { margin: 20px !important; } – Radek Snarski Sep 11 '15 at 10:00
  • Didn't work, no change :-( – neo5_50 Sep 11 '15 at 10:02
  • hard to help you if i cant see the live page tbh, looks like your app.css is getting overwritten. I always use chrome devtool (in firefox its called diffrent) to such problems, – Radek Snarski Sep 11 '15 at 10:14
  • yes I also use dev tools, and it doesn't show my margin css as being over-written, check out this screenshot: http://i.imgur.com/lvWc3FS.png – neo5_50 Sep 11 '15 at 10:21
  • mb try margin-top: 50px !important; , anything changed? – Radek Snarski Sep 11 '15 at 10:26
  • No it just shifts the a link right. The other directions: top, bottom etc, still don't work. The only thing I can think of is in _typography.scss, in the p tag it controls the other three but not the property which shifts it to the right: p { margin: 0 0 ($base-spacing / 2); } – neo5_50 Sep 11 '15 at 10:30
-1

As highlighted by @cinnamon this has little to nothing to do with Neat/Bourbon/Sass/Rails while more to CSS.

Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!

Indeed.

You're currently trying to style an inline element, such as an anchor.

For more information, I'd strongly suggest reading the visual formatting model of CSS 2.1 which is quite comprehensive.

In order to solve this problem of yours you need to change the display mode of your anchor, which will then bring in the needed spacing you're requiring.

I'd also suggest to target the element with its own class, rather than using the generic global selector.

Mr Peach
  • 1,364
  • 1
  • 12
  • 20
  • If you agree that the question is a duplicate, you should have flagged it as such. Questions that are duplicates of another question should be closed, not answered. – cimmanon Sep 20 '15 at 19:12
  • thanks, wasn't aware this was a duplicate. – Mr Peach Sep 20 '15 at 20:15