I have a media query that is working as it should in safari ios but text is not resizing on chrome ios.
I'm just simply trying to nest all of the breaking points for that particular h1 tag.
.page-h1 {
color: #000;
text-align: center;
z-index: 1001;
position: relative;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
padding-top: 20px;
#media screen and (min-width: 380px) {
font-size: 16px !important;
letter-spacing: 2px;
}
#media screen and(min-width: 420px) {
font-size: 22px !important;
letter-spacing: 2px;
}
#media screen and(min-width: 650px) {
font-size: 2em;
letter-spacing: 2px;
}
#media screen and(min-width: 980px) {
font-size: 3em;
letter-spacing: 2px;
}
#media screen and(min-width: 1400px) {
font-size: 3.5em;
letter-spacing: 2px;
}
}
It was a minor syntax issue. I just need to add the 'only'.
.landing-h1 {
#media only screen and (min-width: 320px) {
font-size: 25px;
line-height: 23px;
margin-top: 48%;
letter-spacing: 2px;
word-spacing: 3px;
}
#media only screen and (min-width: 40px) {
font-size: 30px;
line-height: 40px;
margin-top: 33%;
letter-spacing: 2px;
word-spacing: 5px;
}
#media only screen and (min-width: 650px) {
font-size: 3.3em;
line-height: 60px;
margin-top: 24%;
letter-spacing: 2px;
word-spacing: 10px;
}
#media only screen and (min-width: 960px) {
font-size: 5em;
line-height: 95px;
margin-top: 16%;
letter-spacing: 2px;
word-spacing: 15px;
}
color: #fccd31;
text-align: center;
z-index: 100001;
position: relative;
margin-top: 14%;
font-family: 'Avenir';
font-size: 5em;
line-height: 100px;
text-transform: uppercase;
}
Related
I just completed mimicking app creation just like I did in online lessons. I figure, I'd take a little step further by making my app look nicer.
I am trying to change my "home" link text to an image.
Surely, I have done that in HTML before but not in Rails. I am a bit confused because of "link_to" method. How do I do it, giving my current set-up?
application.html.erb
<header>
<div class="header-logo">
<%= link_to("Home", "/") %>
</div>
...
where routes.rb are
get "/" => "home#top"
home.scss
* {
box-sizing: border-box;
}
html {
font: 100%/1.5 'Avenir Next', 'Hiragino Sans', sans-serif;
line-height: 1.7;
letter-spacing: 1px;
}
ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #2d3133;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
input {
background-color: transparent;
outline-width: 0;
}
form input[type="submit"] {
border: none;
cursor: pointer;
}
/* Common Layout ================================ */
body {
color: #2d3133;
background-color: white;
margin: 0;
min-height: 1vh;
background-image: url("/top.jpg");
}
.main {
position: absolute;
top: 64px;
width: 100%;
height: auto;
min-height: 100%;
background-color: #f5f8fa;
}
.container {
max-width: 600px;
margin: 60px auto;
padding-left: 15px;
padding-right: 15px;
clear: both;
}
/* Header ================================ */
header {
height: 64px;
position: absolute;
z-index: 1;
width: 100%;
}
.header-logo {
float: left;
padding-left: 20px;
color: black;
font-size: 22px;
line-height: 64px;
}
.header-logo a{
color: black;
font-size: 22px;
}
.header-menus {
float: right;
padding-right: 20px;
}
.header-menus li {
float: left;
line-height: 64px;
font-size: 13px;
color: black;
padding-left: 15px;
}
.header-menus a {
float: left;
font-size: 13px;
color: black;
padding-right: 15px;
}
.header-menus .fa {
padding-right: 5px;
}
.header-menus input[type="submit"] {
padding: 0 20px;
float: left;
line-height: 64px;
color: black;
margin: 0;
font-size: 13px;
}
/* Top ================================ */
.top-main {
padding: 200px 0 100px;
text-align: center;
position: absolute;
top: 0;
width: 100%;
height: auto;
min-height: 100%;
color: black;
background-color: white;
background-repeat: no-repeat;
background-position: center 50%;
background-size: cover;
background-image: url("/top.jpg");
}
.top-message {
position: relative;
}
.top-main h2 {
font-size: 70px;
font-weight: 500;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
margin-bottom: 20px;
}
.top-main p {
font-size: 24px;
}
/* About ================================ */
.about-main {
padding: 180px 8% 0;
color: black;
}
.about-main h2 {
font-size: 64px;
font-weight: 500;
line-height: 1.4;
}
.about-main p {
font-weight: 200;
font-size: 20px;
}
.about-img {
width: 25%;
}
/* Form ================================ */
.form {
max-width: 600px;
margin: 0 auto;
background-color: black;
box-shadow: 0 2px 6px #c1ced7;
}
.form-heading {
font-weight: 300;
margin: 60px 0 20px;
font-size: 48px;
color: #bcc8d4;
}
.form-body {
padding: 30px;
}
.form-error {
color: #ff4d75;
}
.form input {
width: 100%;
border: 1px solid #ffffff;
padding: 10px;
color: #57575f;
font-size: 16px;
letter-spacing: 2px;
border-radius: 2px;
}
.form textarea {
width: 100%;
min-height: 110px;
font-size: 16px;
letter-spacing: 2px;
}
.form input[type="submit"] {
background-color: #ffffff;
color: black;
cursor: pointer;
font-weight: 300;
width: 120px;
border-radius: 2px;
margin-top: 8px;
margin-bottom: 0;
float: right;
}
.form-body:after {
content: '';
display: table;
clear: both;
}
/* Flash ================================ */
.flash {
padding: 10px 0;
color: black;
background: rgb(251, 170, 88);
text-align: center;
position: absolute;
top: 64px;
z-index: 10;
width: 100%;
border-radius: 0 0 2px 2px;
font-size: 14px;
}
Thank you for your time :)
You can try it <%= link_to image_tag('image_here'), '/' %>
I think this is what you want
<%= link_to "#{image_tag("name-of-img-here.png")}".html_safe, root_path %>
Make sure you image is in the app/assets/images/ folder for this to link correctly.
You will also likely need to add a class and then style it the image for it to look good.
In my app I need to present an HTML file in TextView not in WebView, and this file has a complex CSS, not just text color, bold, etc.
My CSS is like the one below:
table {
width: 100%;
}
table td {
padding: 10px;
border-bottom: 1px solid #eee;
box-sizing: border-box;
}
/* -------------------------------------------------- */
.btn {
float: left;
font-size: 11px;
color: #FFF!important;
text-transform: uppercase;
background: #a8353a;
padding: 0 14px;
margin: 10px 0 0!important;
cursor: pointer;
line-height:30px;
}
.btn:hover {
background: #d8474e
}
/* -------------------------------------------------- */
ul li {
list-style-type: square;
margin: 10px 20px;
}
.allcaps {
text-transform:uppercase;
}
/* -------------------------------------------------- */
.tablewithimages .image {
width: 45%;
}
#media only screen and (max-width: 768px) {
.tablewithimages td, .tablewithimages .image {
display:block;
width:100%;
padding: 10px 0 0 0;
border:0;
}
.tablewithimages img {
margin-top:30px;
}
}
/* -------------------------------------------------- */
/* ---------------- RECOMMENDED APPS ---------------- */
.appslist a {
border: 0 !important;
}
.appslist ul {
vertical-align: top;
margin:0;
padding: 0;
}
.appslist li {
width: 48.5%;
display: inline-table;
margin-bottom: 50px;
vertical-align: top;
padding-right: 1%;
}
.inner_left_side.equal .appslist .appitem {
width: 100%;
padding-right: 0;
margin-bottom: 20px;
}
ul .appitem {
margin: 10px 0;
}
.appslist img {
height: auto;
max-height: 100%;
max-width: 100%;
width: 100%;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
border: 1px solid #ccc;
border-radius: 18px;
overflow: hidden;
}
.appslist .appitem .image {
width: 70px;
height: 110px;
float: left;
margin-right: 10px;
margin-top: 0;
}
.appslist p {
padding-right: 10px;
margin-bottom: 10px;
text-align: initial;
}
.appslist .apptitle {
font-size: 14px;
margin-right: 10px;
padding-top: 0;
margin-top: 0;
margin-bottom: 7px;
text-transform: uppercase;
font-weight: bold;
}
.appslist .apptext {
font-size: 14px;
line-height: 22px;
margin-left: 90px;
}
.appslist .stores {
margin-left: 90px;
width: auto;
display: block;
}
.inner_left_side.equal .appslist .stores {
width: 100%;
text-align: initial;
}
.story .text .appslist .stores {
margin-left: 130px;
}
.appslist .appitem li {
display: inline-block;
min-height: 0;
margin-bottom: 0px;
width: 125px;
background-repeat:no-repeat;
margin: 0;
}
.appslist .appitem li a {
display: block;
padding-left: 33px;
background-repeat: no-repeat;
background-position: 5px center;
color: rgba(51,51,51,1.00);
background-color: rgba(255,255,255,0.00);
border-radius: 3px;
text-decoration: none;
padding-right: 10px;
line-height: 34px;
font-size: 14px;
background-size: auto 75%;
white-space: nowrap;
}
.stores .apple {
background-image:url('********.png');
}
.stores .android {
background-image:url('********.png');
}
#media only screen and (max-width: 800px) {
.appslist li {
width: 100%;
}
.inner_left_side.equal .appslist .stores {
width:auto;
}
}
I searched a lot on how to present full CSS in UITextView, and I found answers like this one but all these answers defined how to add simple CSS.
Does anyone try to add complex CSS to UITExtView before? Are there any libraries support this features?
I applied foundation.css to make my site responsive. But after that tool tips, light box is not working. Fonts are getting larger. Where should I correct in my custom.css or foundation.css
Tool tip not working in this site
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
body,
td.sohotext,
td.text,
p,
span {
font-family: sans-serif, Helvetica, Verdana, Arial;
font-size: 13px;
color: #525252;
line-height: 140%;
}
/* Fixes and hacks */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html input.quick_signup {
background-attachment: fixed;
}
/*END - Fixes and Hacks */
/* Navigation */
#mainnav a:link, #mainnav a:visited {
color: #FFF;
text-decoration: none;
display: block;
padding-right: 13px;
float: left;
padding-top: 5px;
padding-left: 13px;
padding-bottom: 5px;
background-image: url(images/menu_div.jpg);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: right top;
}
#mainnav a:hover {
color: #36CC2F;
background-image: url(images/nav_active.jpg);
background-repeat: repeat-x;
background-position: right top;
padding:4px 12px 4px;
}
.hmains {
font-size: 100%;
}
#megamenu {
list-style-type:none;
width:100%;
margin: 3px auto 04px auto;
height:40px;
padding:2px 0px 3px 0px;
}
table.vmenu_subs {
margin-bottom: 30px;
margin-top: 15px;
}
/*#leftav a:link, #leftnav a:visited, */
a.vmenu_sub_off:link,
a.vmenu_sub_off:visited,
a.vmenu_sub_on:link,
a.vmenu_sub_on:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
font-weight: bold;
color: #000;
background-image: url(images/sideNav_bullet.gif);
background-repeat: no-repeat;
background-position: left center;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #acacac;
text-decoration: none;
padding-left: 24px;
display: block;
width: 150px;
}
/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active {
color: #666;
}
a:link, a:visited {
color: #00CC00;
text-decoration: none;
}
a:hover {
color: #009900;
margin-top:0px;
margin-bottom:0px;
}
#feat a:link, #feat a:visited {
color: #fdb417;
text-decoration: none;
}
#feat a:hover {
color: #fed27e;
}
/*END - Navigation */
#headwrapper {
background-image: url(images/top_bg.png);
background-repeat: 50% no-repeat;
margin: 0px;
padding: 0px;
height: 109px;
position: relative;
}
#featwrapper {
background-color: #1e8019;
height: 124px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #185d14;
overflow: hidden;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #2b9d22;
}
#feat {
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-image: url(images/feat_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 124px;
color: #FFFFFF;
}
#navwrapper {
background-color: #1e8019;
height: 32px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2b9d22;
border-bottom-color: #185d14;
}
#nav {
background-image: url(images/nav_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 32px;
max-width:880px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
}
#contentwrapper {
background-color: #ededf1;
margin: 0px;
padding: 0px;
}
#maincontent {
background-image: url(images/content_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #ededf1;
}
#mainnav {
width: 72%;
float: left;
padding-left: 5px;
}
#signup {
width: 25%;
padding-left: 5px;
float: left;
height: 20px;
padding-top: 2px;
font-size: 85%;
color: #cccccc;
text-align: center;
}
#subnav {
margin: 0px;
float: left;
min-width:155px;
width: 25%;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#belowmenu {
display: block;
float: left;
width: 210px;
padding-top: 15px;
padding-left: 5px;
}
div.sidebox {
display: block;
float: left;
width: 210px;
}
#content {
margin: 0px;
width: 70%;
float: left;
padding-top: 12px;
padding-right: 7px;
padding-bottom: 12px;
padding-left: 7px;
overflow: visible;
}
#date {
font-size: 90%;
text-align: right;
color: #858585;
}
#featleft {
float: left;
width: 25%;
padding-left: 5px;
padding-top: 5px;
}
#featright {
float: left;
width: 72%;
padding-left: 10px;
padding-top: 5px;
}
#footer {
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
font-size: 85%;
padding-bottom: 10px;
color: #939393;
}
#head {
height: 109px;
max-width: 880px;
margin-right: auto;
margin-left: auto;
}
#logo_box {
height: 109px;
float: left;
width: 28%;
}
#tagline {
float: left;
width: 70%;
color: #999999;
text-align: right;
padding-top: 22px;
}
#logo {
position: absolute;
top: 3px;
}
#trimbar {
background-color: #000000;
margin: 0;
padding: 0;
height: 7px;
width: 100%;
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
div.newsbox {
line-height: 115%;
}
/*hiding from IE mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* end hiding from IE mac */
#footerwrapper {
width: 100%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #959595;
background-color: #CCCCCC;
}
/* Integrated Styles */
.portfolio {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
width: 100%;
overflow: auto;
}
span.alert,
span.profile,
span.download,
span.search {
display: block;
float: left;
margin: 10px;
padding: 10px 10px 10px 45px;
}
span.alert {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_alert.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.profile {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_profile.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.download {
width: 100%;
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_download.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.search {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_search.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.product {
color: #333333;
background-color: #fff;
border: 1px solid #b6b6b6;
margin: 10px;
padding: 10px;
font-size: 10px;
line-height: 145%;
display: block;
}
blockquote {
border-top: 4px solid #D3D3D3;
border-bottom: 4px solid #D3D3D3;
margin: 10px;
padding: 10px 10px 5px 45px;
background-color: #f5f5f5;
background-image: url(images/quote1.png);
background-repeat: no-repeat;
background-position: 5px 5px;
}
blockquote p {
padding-right: 35px;
background-image: url(images/quote2.png);
background-repeat: no-repeat;
background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li {
background-image: url("images/li_bullet.gif");
background-position: 0px 4px;
background-repeat: no-repeat;
overflow: hidden;/* added by dsonesuk as li cannot detect area of floated 'a' elements*/
padding-left: 14px;
margin-left: 0px 4px;
font-size: 12px;
}
ul, li {list-style-type:none !important;}
}
h4 {
font-size: 115%;
color: #333;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
#feat h4 {
color: #fdb417;
}
h4 {
font-size: 120%;
color: #0066FF
}
h3 {
font-size: 150%;
color: #1E7D19;
}
h2 {
font-size: 180%;
color: #196115;
}
input.login_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/login_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.pass_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/password_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.quick_signup {
border: 0;
height: 19px;
width: 168px;
padding-left: 32px;
padding-top: 3px;
margin-top: 4px;
background-image: url(images/quick_signup_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #ededed;
}
div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10
{
padding-left: 28px;
padding-bottom: 10px;
background-image: url(images/answer.gif);
background-repeat: no-repeat;
background-position: 2px 0;
}
table#Search_Form,
table#Search_Form2 {
}
table#Detail_Results2,
table#Initial_Results {
margin-top: 15px;
}
.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;
}
#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
padding: 0px!important;
background:inherit!important;
}
#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
bottom: 0;
padding-top: 0px;
position: absolute;
right: 0;
width:62%;
}
#tagline img {
margin: 0px 0px -12px;
height: auto!important;
max-width: 100%;
width: auto!important;
max-height: 68px;
min-height:45px;
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#title#</title>
<link rel="stylesheet" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreen/custom.css" />
<link rel="stylesheet" type="text/css" href="tooltip/themes/2/tooltip.css" />
<link rel="stylesheet" type="text/css" href="lightbox/css/lightbox.css" />
<link rel="stylesheet" type="text/css" href="jsimgslider/themes/8/js-image-slider.css" />
<link rel="stylesheet" type="text/css" href="mactabs/mctabs.css" />
<script type="text/javascript" src="http://www.egtours.com/tooltip/themes/2/tooltip.js"></script>
<script type="text/javascript"src="http://www.egtours.com/sohoadmin/plugins/MegaMenuBuilder/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/mcVideoPlugin.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/js-image-slider.js"></script>
<script src="http://www.egtours.com/float-panel.js"></script>
<script type="text/javascript" src="http://www.egtours.com/mactabs/javascript-tabs.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://www.egtours.com/motionpack.js"></script>
<script src="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/js/vendor/modernizr.js"></script>
</head>
<body>
<body onload="slidedown('featwrapper');">
<div id="headwrapper">
<div id="head" class="clearfix">
<div id="logo_box"><img id="logo" border="0" alt="Home" width="322" height="118" src="images/_userimg-logo.png" /></div>
<div id="tagline"><img border="0" alt="Home" width="468" height="60" src="images/_userimg-ad_banner.png" /></div></div></div>
<div id="trimbar"></div>
<div id="featwrapper" style="display: none; height: 124px; overflow: hidden">
<div id="feat" class="clearfix">
<div id="featleft">#NEWSBOX#</div>
<div id="featright">#PROMOTXT1#</div></div></div>
<div id="navwrapper">
<div id="nav" class="clearfix">
<div id="signup"><img style="border: 0pt" border="0" alt="Toggle the banner up or down" width="110" height="27" src="images/hide-show.png" /></div>
<div id="mainnav">#MEGAMENU#</div></div></div>
<div id="contentwrapper">
<div id="maincontent" class="clearfix">
<div id="subnav">#VSUBS#
<div id="belowmenu">#POWERPLUG4#</div></div>
<div id="content">
<div id="date">#AUTODATESTAMP#</div>#CONTENT#</div></div>
<div id="footerwrapper">#COPYRIGHT#<div id="footer">
<table id="table1" border="0" cellspacing="1" width="100%">
<tbody>
<tr>
<td colspan="7" align="left">
<p align="center"><a title="" href="../../../../../../../Our_Policies.php">Our Policies</a>| Privacy Statement</p></td></tr>
<td width="60"><img border="0" alt="coat of arm" width="66" height="56" src="../../../../../../../images/logos/coatofarm.png" /></td>
<td width="152"><img border="0" alt="natta logo" width="53" height="56" src="../../../../../../../images/logos/nattalogo.png" /></td>
<td width="55"><img border="0" alt="uftaa logo" width="80" height="56" src="../../../../../../../images/logos/uftaa.png" /></td>
<td width="71"><img title="" alt="skull logo" width="75" height="36" src="../../../../../../../images/paybyskull.png" /><br />
</td>
<td width="71">
<p><img title="" alt="paypal logo" width="57" height="57" src="../../../../../../../images/paypalv.png" /></p></td>
<td width="26">
<p><img title="" alt="vitof logo" width="97" height="73" src="../../../../../../../images/vitof_logo.png" /></p></td>
<td width="90"><img border="0" alt="SSL" width="90" height="50" src="http://www.egtours.com/images/rapidssl_ssl_certificate.gif" /></td></tbody></table></div></div>
<script type="text/javascript" src="http://www.egtours.com/lightbox/js/lightbox.js"></script>
<div id="backtop">▲</div>
#jquery#
<script>
/* Remove the slogan div cleanly if it's not in use */
$(function () {
if($(".slogan").html().length === 0) {
$(".slogan").remove();
}
/* Expand the content area out if the sidebar isn't in use */
if (!$("#box-one").text().trim().length){
$(".middle").addClass("large-12").removeClass("large-8");
$(".box").remove();
}
});
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Your path's to foundation.tooltip.js and to foundation1.css are incorrect and they are not loading, therefore no tooltips. If you want your own custom.css file to override any of foundation's css, it needs to load after foundation1.css.
Here is what it looks like on mobile Safari & Chrome (iPhone 5c, iOS8).
This is what it should look like.
The :hover state is working after I tap the button.
Here is my code. Works fine on Chrome on Android 5.1 though. Strange (to me).
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
}
#feedback-page {
text-align: center;
}
#form-main {
width: 100%;
float: left;
padding-top: 0px;
}
#form-div {
background-color: rgba(72, 72, 72, 0.4);
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top: 15px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color: #3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #db1d1d;
color: #3c3c3c;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused {
color: #db1d1d;
border: #db1d1d solid 3px;
}
/* Icons ---------------------------------- */
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize: vertical;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
background-color: white;
}
#button-red {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float: left;
width: 100%;
border: #fbfbfb solid 4px;
cursor: pointer;
background-color: #db1d1d;
color: white;
font-size: 24px;
padding-top: 22px;
padding-bottom: 22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
}
#button-red:hover {
background-color: rgba(0, 0, 0, 0);
color: #db1d1d;
}
.submit:hover {
color: #db1d1d;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease {
width: 100%;
background-color: white;
}
#media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
<div id="form-main">
<div id="form-div">
<form action="//formspree.io/emailemailemail#gmail.com" method="POST" class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<input type="text" name="_gotcha" style="display:none" />
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-red" />
<div class="ease"></div>
</div>
<input type="hidden" name="_next" value="{{store_url}}/page/thanks" />
</form>
</div>
You should add the following to your #button-red styles:
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
This should override any iOS specific browser styles for the button.
There may be some existing CSS definitions in included CSS files, so for debugging purposes you might try to use the !important statement.
I'm trying to use the background-image css property with a website I'm building with Ruby on Rails.
I've tried several different variations of background-image: url, background: url, with and without quotations, and several paths to the image. The image is currently located in app/assets/images/upload.png.
background: url(upload.png);
custom.css.scss
/* UNIVERSAL */
body {
background-color: black;
padding-top: 8px;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: arial, sans-serif;
font-size: 16px;
}
.content {
background-color: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
padding: 1px 15px;
}
h2 {
font-size: 18px;
}
p {
font-size: 16px;
}
ol {
font-size: 16px;
}
/* NAVIGATION */
ul {
padding: 0px;
}
#navtop {
float: right;
display: inline-block;
position: relative;
bottom: 47px;
right:4px;
letter-spacing:1px;
}
#topnavcontainer {
margin-bottom: -40px;
}
#navtop li, #navbottom li, #navbuttons li {
display: inline;
margin: 0px;
padding: 0px;
}
#navbuttons {
word-spacing: 25px;
position: relative;
left: 400px;
bottom: 60px;
display: inline-block;
}
#navbottom {
text-align: center;
word-spacing:90px;
letter-spacing:1px;
margin-top:25px;
}
#navtop a:link, #navbottom a:link, #navtop a:visited, #navbottom a:visited {
text-decoration: none;
font-size: 12px;
color: #999999;
}
#navtop a:hover, #navbottom a:hover {
color: white;
}
#uploadbutton a:link, #uploadbutton a:visited, #viewbutton a:link, #viewbutton a:visited {
text-decoration: none;
border-style:solid;
border-width:3px;
border-color:#666666;
padding: 5px;
color: white;
font-size: 14px;
font-weight: bold;
letter-spacing:2px;
}
#uploadbutton a:hover {
color: #FF0000;
}
#viewbutton a:hover {
color: #0066FF;
}
/*style the main menu*/
.myMenu {
margin:0;
padding:0;
text-align: left;
}
.myMenu li {
list-style:none;
float:left;
}
.myMenu li a:link, .myMenu li a:visited {
display:block;
text-decoration:none;
padding: 0.5em 1em;
margin:0;
}
.myMenu li a:hover {
background-color:black;
}
/*style the sub menu*/
.myMenu li ul {
position:absolute;
visibility:hidden;
margin:0;
padding:0;
}
.myMenu li ul li {
display:inline;
float:none;
}
.myMenu li ul li a:link, .myMenu li ul li a:visited {
background-color:black;
width:55px;
}
.myMenu li ul li a:hover {
background-color:#999999;
}
/* HOME PAGE */
#homepage {
text-align: center;
}
#homeheadline {
color: white;
background-color: #333333;
font-weight:normal;
border-style:solid;
border-width:6px;
border-color:#333333;
letter-spacing:1px;
margin-bottom: 45px;
}
a#clickhere , a#clickhere:visited {
text-decoration: none;
color: #0066FF;
}
#videotitle {
color: #FF0000;
position: absolute;;
bottom: 70px;
display: inline;
font-size: 19px;
left: 60px;
}
#videolist {
position: absolute;
left: 40px;
display: inline-block;
}
#audiencetitle {
color: #0066FF;
position: absolute;
bottom: 70px;
left: 340px;
display: inline;
font-size: 19px;
}
#audiencelist {
position: absolute;
display: inline-block;
left: 320px;
}
a.greenbutton, a.greenbutton:visited, {
font-size: 14px;
color: white;
font-weight: bold;
text-decoration: none;
background-color: #009900;
border-style:solid;
border-width:7px;
border-color:#009900;
letter-spacing:1px;
}
#homead {
margin-bottom: 25px;
margin-top: 45px;
display: block;
}
#lists {
width: 538px;
height: 100px;
position: relative;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* FORMS */
.greenbutton {
font-family: arial, sans-serif;
font-size: 14px;
color: white;
font-weight: bold;
text-decoration: none;
background-color: #009900;
border-style:solid;
border-width:3px;
border-color:#009900;
letter-spacing:1px;
margin-bottom: 40px;
}
.textinput {
border: 1px solid #bbb;
height: 18px;
width: 300px;
margin-bottom:30px;
}
.signform {
text-align: center;
width:300px;
margin-left: auto;
margin-right: auto;
}
.signformfields {
text-align: left;
}
#error_explanation {
color:#f00;
font-size: 16px;
ul { list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
#extend .control-group;
#extend .error;
}
/* Upload Menu */
#uploadpage {
height: 580px;
}
.uploadnav ul {
list-style-type: none;
}
.uploadnav {
width: 200px;
text-align: center;
float:left;
}
.uploadbox {
background-color: black;
background-image: url( image_path ("upload.png"));
border-style:solid;
border-width:25px;
border-color: black;
margin-top: 20px;
}
.uploadgreybox {
background-color: #CCCCCC;
border-style:solid;
border-width:25px;
border-color: #CCCCCC;
margin-top: 20px;
}
.uploadtext {
color: white;
background-color: black;
padding: 5px;
}
.uploadgreytext {
color: #666666;
background-color: #CCCCCC;
padding: 5px;
}
.uploadpagecontent {
float:right;
}
The most correct way:
background-image: url(<%= asset_path 'upload.png' %>)
See the Guide for details: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets (sec. 2.2.1 CSS and ERB)
NOTE: If you're doing this in your application.css then add .erb extension to it to become application.css.erb
if somebody comes by and still looking for an answer and you're using SASS and bootstrap, you can try
background: image-url('bgImage.jpg');
that worked for me. You can as well take a look on http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets as jdoe mentioned.
You need to point to the image path correctly. It should be:
background: url(/assets/url.png);
Try using the Inspector in Google Chrome - useful for checking resources like this that are called by CSS.
I have had the similar problem and I found that the following code works
background-image: url('/assets/xyz.jpg');
you probably need to change the path to the image. Where is the css file in relation to the images folder, eg app/assets/css/style.css.
If it is here then your path the the upload.png will be background: url(../images/upload.png); background: url(/images/upload.png); or background: url(images/upload.png);
You shouldn't have to change the extention to your custom.css.scss or your importantly no need to add erb to the scss file
in application.css file in your /assets/stylesheets directory
all you need is an element
html{
background: url('/images/test.jpg');
text-align:center;
color:#fff;
}
Poss your css file, move the
try
background: white;z-index:-1;