I have encountered this and want to share.
'custom.css.scss'
/* microposts */
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
'show.html.er'
<div class="col-md-8">
<% if #user.microposts.any? %>
<h3>Microposts (<%= #user.microposts.count %>)</h3>
<ol class="microposts">
<%= render #microposts %>
</ol>
<%= will_paginate #microposts %>
<% end %>
</div>
When I used chrome to inspect element, I found out that the environment automatically adjusts. I tried to adjust the padding wherein it aligned the micropost. It took me a day and I decided to ask a help and so, he read the inspect element from chrome. and there, he tried to adjust the padding.
/* microposts */
.microposts {
list-style: none;
padding: 0;
li {
padding: 12px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
As you can see there, I changed the padding from 10px to 12 px. Try to change to other sizes. It might fix.
Hope this will save you time and also, I don't know why this happens, I'm new to rails and I don't know why this happens.
I'd be glad if you'll explain. Thanks!
Related
How can I make a loop inside currentSlide(1) so I want everytime .each work to add currentSlide(1) then currentSlide(2) then currentSlide(3) and so on.
<div class="approach" id="app">
<style>
#media (max-width: 600px){
.btn {
padding: 2px 2px 2px 2px !important; */
}}
#myBtnContainer{
display: flex;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 282px;
}
.column:hover{
border: 1px solid #777;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
width: 100%;
height: 400px;
overflow: hidden;
/*display: flex;*/
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.content img{
object-fit: cover;
height: auto;
width: 100%;
position: absolute;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 10px;
background-color: #333333;
cursor: pointer;
color: white;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 500px;
}
/* The Close Button */
.close {
color: white !important;
position: absolute;
top: 170px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.mySlides img{
padding-top: 70px;
background-color: black;
}
div.desc {
padding: 15px;
text-align: center;
}
#media (max-width:600px) {
.close {
color: white !important;
position: absolute;
top: 120px;
right: 25px;
font-size: 45px;
font-weight: bold;
z-index: 1000;
}
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 83px;
}
}
#media (max-width: 320px){
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 70px;
}
}
#media only screen and (min-width: 812px) {
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 90px;
} }
</style>
<body>
<!-- MAIN (Center website) -->
<div class="container">
<h1>GALLERY</h1>
<div id="myBtnContainer">
<button class="btn" onclick="filterSelection('conversion')"> Conversion</button>
<button class="btn" onclick="filterSelection('fixed-hybrid')"> Fixed Hybrid</button>
<button class="btn" onclick="filterSelection('removal-bar-over-denture')"> Removable Bar Over Denture</button>
<button class="btn" onclick="filterSelection('surgical-guides')"> Surgical Guides</button>
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
</div>
<br>
<!-- Portfolio Gallery Grid -->
<div class="row">
<% #galleries.each do |g| %>
<% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
<div class="column <%= g.product_name %>">
<div class="content">
<%= image_tag image.url, style: "width:100%", onclick: "openModal();currentSlide(#{index + 1})" ,class: "hover-shadow cursor"%>
</div>
</div>
<% end %>
<% end %>
<!-- END GRID -->
</div>
<!-- END MAIN -->
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<% #galleries.each do |g| %>
<% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<%= image_tag image.url, style: "width:100%" %>
</div>
<% end %>
<% end %>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption">hr</p>
</div>
</div>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
Looks like you just need an index to interpolate into currentSlide.
Start by removing duplication and instead of checking every related image with <% if g.image1.present? %> put them into an array and iterate over it with:
<% [g.image1, g.image2, g.image3].compact.each_with_index do |image, index|
compact will make sure that only present images are there, so you don't have to use if present any more.
And then use onclick: "openModal();currentSlide(#{index + 1})" (as index starts at 0, and you seem to need it to start from 1)
Update:
<% #galleries.each do |g| %>
<% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
<div class="column <%= g.product_name %>">
<div class="content">
<%= image_tag image.url,
alt: "conversion",
style: "width:100%",
onclick: "openModal();currentSlide(#{index + 1})",
class: "hover-shadow cursor" %>
</div>
</div>
I have a model that called LinksListWidgetModel that contains an IEnumerable property named Links that contains a list of my website links.
In my Razor view, I have two columns (i.e. one for the grid "col-md-8" and one for another tool "col-md-4". I have a foreach loop that adds each link to the grid tool. I am trying to achieve the following look: Matrix View, however the buttons don't wrap after three, it just continues throughout the width of the page. I am using Bootstrap4.x and flexbox.
I tried following the example in this question: How I can make nice looking matrix of buttons with bootstrap 3?, but that didn't fix the issue either.
Here is my code:
LinksListGrid.cshtml:
#if (Model == null)
{
#Html.Partial("_WidgetNotConfigured") }
else
{
<div class="btn-group btn-matrix" role="group">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<button>
<a class="linkContainer-gridItem-link btn btn-default" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</button>
</div>
}
</div>
}
LinkContainer.scss:
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
font-weight: 400;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
width: 290px;
display: block;
margin: 0 auto;
padding: 0;
padding-bottom: 19px;
font-family: "Montserrat",sans-serif;
text-align: center;
.linkContainer-gridItem {
background-color: $colorBrandBlue;
border-radius: 25px;
width: 120px;
height: 120px;
margin: 10px;
display: inline-block;
vertical-align: top;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 20px 10px;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media screen and (max-width: 767px) {
&.linkContainer-gridLayout {
padding: 0;
}
}
}
.btn-matrix {
> .btn {
&:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
&:nth-child(n+4) {
margin-top: -1px;
}
&:first-child {
border-bottom-left-radius: 0;
}
&:nth-child(3) {
border-top-right-radius: 4px !important;
}
&:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
&:last-child {
border-top-right-radius: 0;
}
}
}
It ends up looking like this: Grid View
How can I change this to make it look like the first screenshot's matrix/grid display? After every 3 buttons it goes on the second line.
I don't think clear:left; will work on flexbox. But there are other ways to do it.
HTML & SCSS way
I think you would be better off just styling .btn-matrix yourself, without mixing .btn-group styles, because Bootstrap .btn-group brings in lots of noice on its .btn children, such as border-radius, border, etc. You would need to style them using your own styles anyway so why bother.
I think the following structure should be generic enough you can use to construct a matrix:
<div class="btn-matrix btn-matrix-white" role="group">
<a class="btn" href="#">
<div class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" />
<i class="fas fa-chart-bar fa-stack-1x" />
</div>
Reports
</a>
...
</div>
First of all, in your original HTML structure, you had a button that wraps an anchor link. That's not necessary because Bootstrap has classes to style an anchor link to just look like a button.
Secondly, I am using icon stacking method to construct icons with circle backgrounds. You can read about it here: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
Finally, here is the styles:
$numOfMatrixItemPerRow: 3;
$matrixItemBorderWidth: 1px;
.btn-matrix {
display: flex;
flex-flow: row wrap;
box-shadow: 0 0 1rem #ccc;
border: 1px solid transparent;
border-radius: .25rem;
> .btn {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
padding: 5%;
width: calc(100% / #{$numOfMatrixItemPerRow});
border-radius: 0;
}
&.btn-matrix-white {
> .btn {
background-color: #fff;
border-right: $matrixItemBorderWidth solid #ddd;
border-bottom: $matrixItemBorderWidth solid #ddd;
.fa-stack-2x {
color: var(--primary);
}
.fa-stack-1x {
color: #fff;
}
&:nth-child(#{$numOfMatrixItemPerRow}n) {
border-right: none !important;
}
&:last-child {
border-bottom: none !important;
}
}
}
}
Really nothing tricky there except you would need to use SASS Interpolation to involve $numOfMatrixItemPerRow variable into calculations:
Display .btn-matrix as a wrappable flex row
Set the width of each button to be 100% / $numOfMatrixItemPerRow so that each row will contain the exact number of items before breaking into new rows
Display .btn as flexbox column so that you can easily align the icons and text there
Set the right and bottom border of each button, with exceptions of the last one on each row and last one
demo: https://jsfiddle.net/davidliang2008/1wqost69/201/
ASP.NET MVC way
Now since you're using ASP.NET MVC, I think there is another approach you can consider. That is, in the loop where you loop though each link from the model, you can define a variable there and do something like:
<div class="btn-matrix">
#for (int i = 0; i < Model.Links.Count(); i++)
{
var link = Model.Links[i];
if (i % numOfItemsPerRow == 0)
{
<div class="row">
}
<div class="col-md-4">
<a class="btn" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</div>
if ((i+1) % numOfItemsPerRow == 0 || i + 1 == Model.Links.Count())
{
</div>
}
}
</div>
I'm just making things up but hopefully you see where I am going.
I am really new to rails and I'm teaching myself by creating a web app, right now I'm building a pintrest like web app.
Everything is working nicely, but I want the pins to be in a grid sort of view. For that I tried using masonry-rails Gem.
But it doesn't seems to work.
My Index file
<link href="/assets/lposts.css.scss" rel="stylesheet">
<link href="/assets/pins.js.coffee" rel="javascript">
<div class="transitions-enabled" id="pins">
<% #posts.each do |post| %>
<div class="box panel panel-default">
<%= link_to (image_tag post.picture.url), post %>
<h2>
<%= link_to post.title, post %>
</h2>
<p class="user">
Submitted by
UserName
</p>
</div>
<% end %>
</div>
My css file
body {
background: #E9E9E9;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 100;
}
nav {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
.navbar-brand {
a {
color: #BD1E23;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
}
}
#pins {
margin: 0 auto;
width: 100%;
.box {
margin: 10px;
width: 350px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 7px;
text-align: center;
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 22px;
margin: 0;
padding: 25px 10px;
a {
color: #474747;
}
}
.user {
font-size: 12px;
border-top: 1px solid #EAEAEA;
padding: 15px;
margin: 0;
}
}
}
#edit_page {
.current_image {
img {
display: block;
margin: 20px 0;
}
}
}
#pin_show {
.panel-heading {
padding: 0;
}
.pin_image {
img {
max-width: 100%;
width: 100%;
display: block;
margin: 0 auto;
}
}
.panel-body {
padding: 35px;
h1 {
margin: 0 0 10px 0;
}
.description {
color: #868686;
line-height: 1.75;
margin: 0;
}
}
.panel-footer {
padding: 20px 35px;
p {
margin: 0;
}
.user {
padding-top: 8px;
}
}
}
textarea {
min-height: 250px;
}
My js file
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
In my application.scss
*= require 'masonry/transitions'
In my application.js
//= require masonry/jquery.masonry
The way you include you js assets is wrong.
Please include the js file using
<%= javascript_include_tag 'pins' %>
and place the pins.js.coffee file in precompile assests path
Rails.application.config.assets.precompile += %w(articles.js)
Either you can place your assets in application.js
//= require pins
Hope this is going to work for you.
I have a button being used to show a dropdown div. The button padding and text can be clicked on to show the dropdown div. The very small Material "font-icon" CANNOT be clicked to show the dropdown div. How can I ensure that you can click anywhere within the button (including directly on the Material icon) in order to show the dropdown div.
Here is a link to show you what I've done.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
body {
margin: 0;
color: #333;
overflow-x: hidden;
padding-top: 80px;
}
:root{
var-MainColor: #4C00F9;
--main-color: #4C00F9;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -64px;
}
#navWrapper {
padding: 0px;
border-bottom: 1px solid #eee;
font-size: 13px;
font-family: Sans-Serif;
width: 100%;
background-color: #fff;
z-index: 1000;
height: 64px;
}
#navLeft {
float: left;
}
#navRight {
float: right;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: var(--main-color);
padding: 24px;
font-size: 13px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: var(--main-color);
color: #fff;
outline: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-left: 10px;
margin-right: 2%;
margin-top: -8px;
border-radius: 2px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: var(--main-color);
padding: 24px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #fdfdfd;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.material-icons.md-01 { font-size: 13px; vertical-align: middle; margin-top: -3px;}
.material-icons.md-02 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: red;}
.material-icons.md-03 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: #40FA35;}
.material-icons.md-04 { font-size: 21px; vertical-align: middle; margin-top: -1px;}
.material-icons.md-05 { font-size: 16px; vertical-align: middle; margin-top: -1px;margin-right: 15px;}
#main {
margin-top: 50px;
position: absolute;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 50px 0px;
}
#sectionInnerText {
max-width: 700px;
padding: 0px 100px;
}
#sectionInnerImage {
max-width: 1000px;
padding: 0px 100px;
}
#sectionInnerImage-rowWrapper {
padding: 0px 100px;
}
#sectionInnerImage-3row {
width: 31%;
max-width: 400px;
display: inline-block;
margin-right: 1vw;
}
#sectionInnerImage-2row {
width: 48%;
max-width: 1000px;
display: inline-block;
margin-right: 1vw;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
font-weight: 700;
font-family: Sans-Serif;
}
h2 {
font-size: 22px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 15px;
}
h3 {
font-size: 13px;
font-family: Sans-Serif;
font-weight: normal;
margin-bottom: 30px;
}
h4 {
font-size: 17px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 5px;
margin-bottom: 0;
display: inline-block;
}
p {
font-size: 19px;
line-height: 180%;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: normal;
margin: 15px 0;
}
a.one {
display: block;
color: #fff;
background-color: var(--main-color);
padding: 16px;
text-decoration: none;
text-align: center;
border-radius: 3px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
max-width: 350px;
}
a.one:hover {
background: #4C03F1;
}
a.one:active {
background-color: var(--main-color);
}
#media only screen and (min-width: 1080px) {
section {
min-height: 30vh;
}
}
#media only screen and (max-width: 1080px) {
html, body {
margin: 0;
color: #333;
overflow-x: hidden;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 0px;
}
#sectionInnerText {
padding: 2vh 5vw;
}
#sectionInnerImage {
padding: 0 5vw;
}
#sectionInnerImage-rowWrapper {
padding: 0 5vw;
}
#sectionInnerImage-3row {
width: 100%;
max-width: 1000px;
}
#sectionInnerImage-2row {
width: 100%;
max-width: 1000px;
}
p {
font-size: 21px;
}
ul li {
font-size: 21px;
}
a.one, a.two, a.three, a.four {
display: block;
margin-bottom: 25px;
max-width: 100%;
max-width: 450px;
}
.dropdown-content {
width: 100vw;
margin: 0;
margin-top: -6px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
border-top: 1px solid #eee;
border-bottom: 0;
z-index: 1;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
}
.dropdown-content a{
border-bottom: 1px solid #f4f4f4;
}
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="nav-down">
<div id="navWrapper">
<div id="navLeft">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu <i class="material-icons md-01">keyboard_arrow_down</i></button>
<div id="myDropdown" class="dropdown-content">
<i class="material-icons md-05">home</i> Home & Projects List
<i class="material-icons md-05">dashboard</i> Project 01
<i class="material-icons md-05">dashboard</i> Project 02
<i class="material-icons md-05">dashboard</i> Project 03
<i class="material-icons md-05">account_circle</i> Info & Contact
<i class="material-icons md-05">picture_as_pdf</i> View & Download Resume
</div>
</div>
</div>
</div>
</header>
Trying to follow this tutorial in this book, but the images supplied are not being shown on the page my /views/layouts/ads.html.erb looks like this
<!doctype HTML>
<html>
<head>
<title>Ads: <%= controller.action_name %></title>
<%= stylesheet_link_tag 'default.css' %>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<h1>MeBay</h1>
<ul id="nav">
<li>All Ads</li>
</ul>
</div>
</div>
<div id="content">
<%= yield %>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS in /app/assets/stylesheets looks like this
html, body { height: 100%; }
body { background-color: #e6dacf; background-image: url('/images/bg.png'); background-position: top center; background-repeat: repeat-y; font-family: "Trebuchet MS", Arial, san-serif; font-size: 14px; margin: 0; padding: 0; text-align: center; }
a { color: #000; }
a:hover { background: #000; color: #e6dacf; }
div#wrapper { min-height: 100%; }
* html div#wrapper { height: 100%; }
div#header { background: url('/images/bgHeader.png'); height: 100px; padding: 8px 0 0 0; }
div#header div { margin: 0 auto; position: relative; width: 800px; }
div#header h1 { left: 0; margin: 0; position: absolute; }
div#header h1 { background: url('/images/logo.png') no-repeat; display: block; height: 0; margin: 0 auto; padding: 92px 0 0 0; overflow: hidden; width: 319px; }
ul#nav { float: right; list-style: none; margin: 0; padding: 69px 0 0 0; }
ul#nav li { background: #e6dacf; border: solid #000; border-width: 2px 2px 0 2px; float: left; margin: 0 0 0 2px; }
ul#nav a { display: block; padding: 3px 6px 0 6px; text-decoration: none; }
ul#nav a:hover { display: block; padding: 3px 6px 7px 6px; }
ul#nav a.current { padding-bottom: 8px; }
ul#nav a.current:hover { background: #e6dacf; color: #000; cursor: default; }
div#content{ margin: 0 auto; padding: 20px 0; text-align: left; width: 720px; height: 300px}
div#content img { border: 10px solid #000; float: right; margin: 18px 0 0 20px; }
div#content h2 { border: solid #999; border-width: 0 0 5px 0; font-size: 28px; margin: 0; padding: 0 0 10px 0; }
div#content p { margin: 0; padding: 4px 6px 10px 0; }
div#clearfooter { height: 110px; }
div#footer { background: url('/images/bgFooter.png'); height: 110px; margin: -110px auto 0 auto; }
and I placed the supplied images in /app/assets/images
This is how it should look, and also what it looks like for me
http://imgur.com/a/VEryr
You should debug these kinds of problems with either
Chrome Developer Tools
Firebug for Firefox
Both provide excellent support for resolving js / css related issues.
In your particular case, you need to check the Network or Net tabs in the tools to see how the CSS gets loaded. Most likely you'll see an error in loading the stylesheet.
The tool will show you the CSS path its trying to access and you can debug it from there...