How to Fix Garbled Text in Mobile Version of the Website - css

I just checked my website via my GalaxyS5 smart phone and noticed the some information garbled on bottom portion of site. It normally looks fantastic on the smart phone but this seems like a big problem to me as most of my visitors are mobile visitors.
Attached are screen shots from my mobile device. Can someone identify the issue with the website?
.art-button-wrapper .art-button
{
font-weight: bold;
font-size: 12px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: left;
text-decoration: none !important;
color: #FEF200 !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 31px;
height: 31px;
margin: 0 !important;
padding: 0 19px !important;
overflow: visible;
cursor: default;
z-index: 0;
}
.art-button img, .art-button-wrapper img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 31px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2 .art-button-wrapper
{
display: block;
float: left;
}
input, select, textarea, select
{
vertical-align: middle;
font-weight: bold;
font-size: 12px;
}
.art-block select
{
width:96%;
}
.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FFF200 !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button
{
color: #FFF200 !important;
}
.art-button-wrapper .l, .art-button-wrapper .r
{
display: block;
position: absolute;
z-index: -1;
height: 93px;
margin: 0;
padding: 0;
background-image: url('../images/button.png');
}
.art-button-wrapper .l
{
left: 0;
right: 8px;
}
.art-button-wrapper .r
{
width: 409px;
right: 0;
clip: rect(auto, auto, auto, 401px);
}
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -31px;
}
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -62px;
}
.art-button-wrapper input
{
float: none !important;
}
/* end Button */
/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublock-body
{
position: relative;
z-index: 1;
padding: 0;
}
.art-vmenublock-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublock
{
margin: 7px;
}
/* end Box, Block, VMenuBlock */
/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
/* end Box, Box, VMenuBlockContent */

Related

Target the same child with two differents parent class

Since few days I'm using SASS to write my css files.
I have two different parents class but this two parents have the same children classes. So I want to build my SCSS tree of this CSS code :
#header {
position: relative;
width: 100%;
}
#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
}
#header .l-header-top, #header-g .l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
I tried this but I think I forget something :
#header {
position: relative;
width: 100%;
&#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
}
Thanks
In your code, if you are using & it means that they are in the same element and in a single element there is only 1 ID. You should use a class in that situation.
#header {
position: relative;
width: 100%;
&#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
but it should be something like this. #header and #header-gestion are you ID parents while they have the same children which are .l-header-top.
#header {
position: relative;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
Or you use & in this way which is based on BEM Methodology in class naming conventions. You can check this link: BEM — Block Element Modifier Methodology
#header {
position: relative;
width: 100%;
&-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
}
}
#header,
#header-g {
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}

Jekyll site stopped working, but nothing changed

My jekyll sight had been running fine for a while until I add a blog post, which works perfectly locally, but then I get an error via email from GitHub saying
SCSS file Desktop/my-blog/css/style.scss has an error on line 1: File to import not found or unreadable: ../_sass/bootstrap. Load path: /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.4.0/_sass.
I went to report this as an issue on the theme I was using, but I noticed that others were having similar build issues with Jekyll. Here's the link to that thread
Also, here is my style.css file, which seems to be causing the error.
---
---
#import '../_sass/bootstrap';
#import '../_sass/syntax-highlighting';
%oswald { font-family: 'Oswald', sans-serif; }
%roboto { font-family: 'Roboto Condensed', sans-serif; }
body {
#extend %roboto;
font-size: 18px;
line-height: 30px;
padding-top: 51px;
-webkit-font-smoothing: antialiased;
}
p {
margin-bottom: 30px;
}
section, header, footer, main, article, nav, aside { position: relative; }
a {
outline: none !important;
text-decoration: none !important;
transition: all 225ms ease;
color: rgb(19, 100, 214);
&:hover { color: #6165FF; }
}
.btn {
text-transform: uppercase;
font-weight: 400;
#extend %oswald;
}
h1, h2, h3, h4, h5, h6 { #extend %oswald; }
::selection {
background: #086AFF;
color: #fff;
}
nav.navbar {
margin: 0;
a {
text-transform: uppercase;
font-size: 16px;
}
.navbar-brand {
text-transform: none;
i {
transition: inherit;
color: rgb(19, 100, 214);
transform: scale(1);
}
&:hover i {
color: rgb(19, 100, 214);
transform: scale(1.35);
}
}
}
.title-group {
text-align: center;
padding: 0 15px;
margin: 50px 0 100px;
p {
max-width: 800px;
margin: 25px auto 0;
}
}
h1.special {
position: relative;
text-align: center;
overflow: hidden;
margin: 4;
text-transform: uppercase;
#extend %oswald;
font-size: 69px;
line-height: 69px;
font-weight: 700;
color: rgb(19, 100, 214);
span {
display: inline-block;
position: relative;
padding: 0 15px;
max-width: 1000px;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 1px;
background: #e8e8e8;
width: 99999999px;
top: 50%;
transform: translateY(-50%);
}
&:before { left: 100%; }
&:after { right: 100%; }
}
}
.tile {
position: relative;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
margin-bottom: 125px;
.inner-guts { padding: 50px; }
h2 {
margin: 0;
font-size: 100px;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 100px;
}
.featurette {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 15px;
width: 100%;
height: 550px;
background-color: #e8e8e8;
.img {
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 225ms ease;
transform: scale(1);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: #000;
opacity: 0.4;
transition: all 225ms ease;
}
}
iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.img {
transform: scale(1.2);
&:before {
opacity: 0.2;
}
}
}
}
.excerpt {
font-size: 35px;
font-weight: 300;
line-height: 49px;
color: #484848;
p {
margin: 0;
}
}
.tags {
position: absolute;
left: 0;
top: 100%;
margin-top: 15px;
span {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
#extend %oswald;
}
}
.read-more {
margin-top: 50px;
width: 100%;
max-width: 175px;
position: relative;
padding-right: 75px;
i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-54%);
font-size: 31px;
line-height: 100%;
}
}
}
aside {
font-size: 17px;
color: #525252;
margin: 16px 0;
#extend %oswald;
span {
text-transform: uppercase;
margin: 0 5px;
}
}
.site-footer {
margin-top: 200px;
}
.pagination-wrap {
text-align: center;
}
.topper {
height: 500px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
pre {
margin: 75px -100px;
}
#media only screen and (max-width : 991px) {
pre {
margin-left: 0;
margin-right: 0;
}
}
#media only screen and (max-width : 480px) {
.tile .featurette, .topper {
height: 300px;
}
h1.special,
.tile h2 {
font-size: 40px;
line-height: 44px;
}
.tile .inner-guts {
padding: 15px 25px;
}
.tile .excerpt {
font-size: 22px;
line-height: 35px;
}
}
Any advice is extremely helpful!
The error is telling you that the file bootstrap.scss can't be imported; either because it isn't in the location specified (the theme /_scss/ directory) or because it isn't called bootstrap.scss. The link you posted seems completely unrelated.

z-index on absolutely and staticly positioned element element

How can you make absolutely positioned element appear under static element.
Z-index doesn't seem to work. The green box should be above the line (will be white).
http://jsfiddle.net/matthewabrman/pbL52gtj/
html:
<h3 class="line"><span>Lorem Ipsum</span></h3>
css:
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}
Try this. Hope you are trying to get this FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
z-index:-1;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
position: relative;
z-index:1;
}
OR FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
z-index:-1;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}

Bootstrap: .form-control:before won't work

i try to style an form control over CSS (example http://jsfiddle.net/fyVs4/).
But the CSS selector .form-control:before won't work- Curiouse, i had make a other button with CSS ober button:before and that's work:
Won't work
.form-control:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
display: block;
width: 7px;
height: 42px;
background: #00122A url('../images/button/left.png');
border-radius: 10px 0 0 10px;
}
WORK
nav ul li button:before {
content: "";
position: absolute;
top: 0;
left: -5px;
bottom: 0;
display: block;
width: 5px;
height: 37px;
background: #00122A url('../images/button/left.png');
border-radius: 10px 0 0 10px;
}
What i'm doing wrong?

How to make a transparent header?

I'm trying to make the header of my site transparent using rgba code. But it doesn't work. Could you please help me to fix this problem?
Thanks in advance!
There is the header code:
/*==================== 3. Header ====================*/
.site {
margin: 0 auto;
width: 100%;
position: relative;
}
.site.full-banner {
padding-top: 0;
}
.site-main {
margin-bottom: 70px;
}
body.page-template-page-landing-php {
overflow: hidden;
}
.landing.site-main {
margin: 0;
padding: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.archive.woocommerce-page .site-main {
margin-bottom: 80px;
}
.site-header {
width: 100%;
z-index: 10000;
}
.full-banner .site-header {
position: absolute;
top: 0;
}
.site-header.header-1{
background: url('../images/header_bg.png') !important;
}
.site-header.header-2 {
background: rgba(218, 202, 202, .5);
}
.header-relative .site-header {
position: relative;
}
.header-absolute .site-header {
position: absolute;
}
/*========== 3.1 Header Top ==========*/
.header-top {
line-height: 15px;
min-height: 35px;
}
.header-2 .header-top {
min-height: 36px;
}
.site-header,
.site-header a,
.toplinks a,
.mini-cart .mobile-hide .subtotal .amount {
color: #dadada;
}
.header-2 .header-top {
border-bottom: 1px solid #242424;
-webkit-box-shadow: 0 1px 0 rgba(128,128,128,.15);
-moz-box-shadow: 0 1px 0 rgba(128,128,128,.15);
box-shadow: 0 1px 0 rgba(128,128,128,.15);
}
.header-2 .header-container {
min-width: 750px;
}
.main-header.fixed {
position: fixed;
background: rgba(218, 202, 202, .5);
width: 100%;
height: 77px;
left: 0; top: -7px;
z-index: 10000;
}
.main-header.fixed .navbar {
background: none;
}
.main-header.fixed .header-top {
display: none;
}
#primary {
width: 75%;
margin: 0;
float: left;
}
.full-width #primary {
width: 100%;
float: none;
}
#primary {
width: 100%;
}
.left-sidebar #primary {
width: 75%;
float: right;
}
.right-sidebar #primary {
width: 75%;
float: left;
}
.entry-header,
.entry-content,
.entry-summary,
.entry-meta {
margin: 0 auto;
width: 100%;
}
.entry-header h1 {
font-size: 15px;
}
In CSS 3, they introduced opacity.
opacity: 0.9;
It takes values from 0.0(invisible) to 1.0(opaque).
Let me know if it doesn't work for you. :-)
P.S. Not sure what the browser compatability is like, but so far it's working for me.

Resources