Ruby on Rails Tutorial - Ch 7 CSS issues - css

Im working my way through Michael Hartls Ruby on Rails tutorial and have run into a snag in while trying to get my style to match that of the tutorial. For whatever reason the changes that should be applied to the text in h1 under sidebar aren't going through and I cant find where the error in my code is.
This is his styling:
And this is mine:
This is the code in question.
#import "bootstrap-sprockets";
#import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}

Related

How to increase padding around images in Jekyll

I have a Jekyll blog with GitHub pages and have an issue where images embedded in blog posts don't have any padding, meaning the text is too close to the image:
I'd like to specify the padding in the style.scss file so it's applied to all images in blog posts in the future. Where should I add a padding argument? Thank you!
---
---
//
// IMPORTS
//
#import "reset";
#import "variables";
// Syntax highlighting #import is at the bottom of this file
/**************/
/* BASE RULES */
/**************/
html {
font-size: 100%;
}
body {
background: $white;
font: 16px/1.4 $helvetica;
color: $darkGray;
}
.container {
margin: 0 auto;
max-width: 740px;
padding: 0 10px;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: $helveticaNeue;
color: $darkerGray;
font-weight: bold;
line-height: 1.7;
margin: 1em 0 15px;
padding: 0;
#include mobile {
line-height: 1.4;
}
}
h1 {
font-size: 30px;
a {
color: inherit;
}
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
color: $gray;
}
p {
margin: 15px 0;
text-align: justify;
}
a {
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover, &:active {
color: $blue;
}
}
ul, ol {
margin: 15px 0;
padding-left: 30px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ol ul, ul ol, ul ul, ol ol {
margin: 0;
}
ul ul, ol ul {
list-style-type: circle;
}
em, i {
font-style: italic;
}
strong, b {
font-weight: bold;
}
img {
max-width: 100%;
}
// Fixes images in popup boxes from Google Translate
.gmnoprint img {
max-width: none;
}
.date {
font-style: italic;
color: $gray;
}
// Specify the color of the selection
::-moz-selection {
color: $black;
background: $lightGray;
}
::selection {
color: $black;
background: $lightGray;
}
// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/*********************/
/* LAYOUT / SECTIONS */
/*********************/
//
// .masthead
//
.wrapper-masthead {
margin-bottom: 50px;
}
.masthead {
padding: 20px 0;
border-bottom: 1px solid $lightGray;
#include mobile {
text-align: center;
}
}
.site-avatar {
float: left;
width: 70px;
height: 70px;
margin-right: 15px;
#include mobile {
float: none;
display: block;
margin: 0 auto;
}
img {
border-radius: 5px;
}
}
.site-info {
float: left;
#include mobile {
float: none;
display: block;
margin: 0 auto;
}
}
.site-name {
margin: 0;
color: $darkGray;
cursor: pointer;
font-family: $helveticaNeue;
font-weight: 300;
font-size: 28px;
letter-spacing: 1px;
}
.site-description {
margin: -5px 0 0 0;
color: $gray;
font-size: 16px;
#include mobile {
margin: 3px 0;
}
}
nav {
float: right;
margin-top: 23px; // #TODO: Vertically middle align
font-family: $helveticaNeue;
font-size: 18px;
#include mobile {
float: none;
margin-top: 9px;
display: block;
font-size: 16px;
}
a {
margin-left: 20px;
color: $darkGray;
text-align: right;
font-weight: 300;
letter-spacing: 1px;
#include mobile {
margin: 0 10px;
color: $blue;
}
}
}
//
// .main
//
.posts > .post {
padding-bottom: 2em;
border-bottom: 1px solid $lightGray;
}
.posts > .post:last-child {
padding-bottom: 1em;
border-bottom: none;
}
.post {
blockquote {
margin: 1.8em .8em;
border-left: 2px solid $gray;
padding: 0.1em 1em;
color: $gray;
font-size: 22px;
font-style: italic;
}
.comments {
margin-top: 10px;
}
.read-more {
text-transform: uppercase;
font-size: 15px;
}
}
.wrapper-footer {
margin-top: 50px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: $lightGray;
}
footer {
padding: 20px 0;
text-align: center;
}
// Settled on moving the import of syntax highlighting to the bottom of the CSS
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
#import "highlights";
#import "svg-icons";
I would modify your img tag in your style.scss...
change this...
img {
max-width: 100%;
}
to this...
img {
max-width: 100%;
padding: 5px;
}
if the image has it's own DIV use this...
.imageDiv img {
padding: 5px;
}

Ruby On Rails - Something wrong with styles

I'm following Ruby On Rails Tutorial by Michael Hartl and I think there is something wrong with my styles.
First, I get this instead of this
As you see, there is smth wrong with title style and debug box style
Then, in signup page I get this instead of this
My style file (custom.css.scss):
#import "bootstrap";
/* variables */
$paddingTopBody: 60px;
$marginBottomH1: 10px;
$grayMediumLight: #eaeaea;
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: $paddingTopBody;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: $marginBottomH1;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $grayMediumLight;
color: $grayLight;
a {
color: $gray;
&:hover {
color: $grayDarker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 10px;
}
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
#extend .control-group;
#extend .error;
}
}
Any ideas where the error could be?
I don't know about Michael's book, but as your screenshot, you might be omitted 'css reset'
edit: I find out sample app's github from that book, you can compare style file directly.
Finally I've found the error. I forgot } after footer so everything after footer was under its tag. Thanks #Leqna for answer

Sub Menu Sensitive In Chrome But Fine In Firefox

I'm only a year in to Web Design. I've been learning menus at Lynda.com and specifically have a problem creating a sub menu.
I've made the sub menu how I want it, however when I flick between the list items on my menu they change over too quickly.
See on the picture below:
http://s22.postimg.org/699f35hm9/macca_travel.png
If you look at the position of the cursor, it is still on the 'About' tab, but the 'Blog' hover has lit up and has been selected.
The two sections with sub menus are the 'Blog' tab and the 'Photos' tab. These two tabs don't cross over smoothly and I think it's because for whatever reason they're selecting too quickly.
I don't know why :)
Here is my CSS:
#font-face {
font-family: 'telegraficoregular';
src: url('../FONTS/telegrafico-webfont.eot');
src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
url('../FONTS/telegrafico-webfont.woff') format('woff'),
url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cf:after {
content: "";
display: table;
clear: both;
}
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
background: white;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: white;
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: white;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:#6593b5;
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background: black;
height: 2em;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding:0 2em;
line-height: 2em;
color: white;
font-family: telegraficoregular;
text-decoration: none;
}
li, ul {
position: relative;
margin: 0;
padding: 0;
}
ul.SubMenu {
float: none;
width: auto;
height: auto;
list-style: none;
background: black;
color: white;
position: absolute;
left: -9000em;
}
ul.SubMenu li{
float: none;
}
ul.SubMenu li a{
display:block;
border-bottom: 1px solid white;
padding: .2em 2em;
white-space: nowrap;
}
li:hover ul {
left: 0;
}
li:hover ul {
left: 0;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 80px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
a:hover {
color: orange;
height: 32px;
background: black;
}
ul.SubMenu li a:hover {
background: orange;
color: white;
}
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 160px;
background: black;
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 160px;
text-align: center;
}
Thanks Joe
Add the following to each section of your CSS:
ul.SubMenu {
margin-top: 2em;
}
nav ul li a {
float: left;
}
nav ul li {
display: block;
}

sass errors while compiling to CSS [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I was flowing the ROR tutorials about compiling CSS to Sass, but i couldn't fix with the problem, it's very mysterious , i have done some research , it's all unrelated. Thank you very much.
Invalid CSS after " }": expected selector or at-rule, was "}"
(in `/Users/snailwalker/rails_projects/sample_app/app/assets/stylesheets/custom.css.scss:82)`
Extracted source (around line #5):
2
3
4
5
6
7
8
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
Css file .
#import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p{
font-size: 1.1em; line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: #fff;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #999;
}
footer a {
color: #555;
&:hover {
color: #222;
}
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 10px;
}
}
}
You have two '}' at the end of the file that you don't need. The correct file would be:
#import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p{
font-size: 1.1em; line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: #fff;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #999;
}
footer a {
color: #555;
&:hover {
color: #222;
}
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 10px;
}

ruby on rails: any change to custom.css.scss make the app crash

I'm learning rails. I have this problem and I hope you can help me.
HTTP answer code is 500 ... I am learning from a rails tutorial...
Site crashes after adding the style - /* sidebar */
This is my custome.css.scss:
#import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $grayMediumLight;
color: $grayLight;
a {
color: $gray;
&:hover {
color: $grayDarker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 10px;
}
}
}
/* sidebar */
aside {
section {
padding: 10px 0;
border-top: 1px solid $grayLighter;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
and why the site falls due to renaming the comments? it the syntax language "SASS"?
other files https://gist.github.com/phantomass/7356307
The issue here may be the way you are using SASS comments and are having an issue with the compiled code.
I am not sure of your rails setup but I would take a look at the Rails asset preprocessing section
If you provide more information on your rails app I will try my best to resolve the issue.

Resources