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.
Related
Anyone who know how I write the css to get the background to be under left menu and than go out to the left; full width.
Back in the old days you could do this with frameset, but how about nowadays?
.currentpage-category {
main {
padding: 0;
}
#categoryWithSidemenu{
background: rgb(31,57,87);
background: linear-gradient(163deg, rgba(31,57,87,1) 0%, rgba(94,106,120,1) 100%);
background-size: 30% 100%;
background-repeat: no-repeat;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
.categoryContainer {
width: 100%;
padding: 20px 0 200px 0;
margin-right: auto;
margin-left: auto;
max-width: 1426px;
}
}
#categoryWithoutSidemenu {
padding: 100px 15px 120px;
}
}
This is what I have tried, but the "background-size" above doesn't work.
Thank for reply, but I found a solution by my self.
https://imgur.com/kWnl089
.currentpage-category {
main {
padding: 0;
}
#categoryWithSidemenu > * {
margin: 0;
}
#categoryWithSidemenu{
background-color: #1d2e42;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
.categoryContainer {
width: 100%;
padding: 0px 0 0px 0;
max-width: 1426px;
margin: 0 auto;
position: relative;
z-index: 2;
&:after {
content: " ";
display: block;
clear: both;
}
.sidebar {
width: 200px;
float: left;
min-height: 600px;
}
.side-content {
background: #1d2e42;
padding: 20px 20px 100px;
}
}
&:before {
content: " ";
z-index: 1;
display: block;
position: absolute;
left: 0;
top: 650px;
background: rgb(31,57,87);
background: linear-gradient(180deg, rgba(31,57,87,1) 0%, rgba(94,106,120,1) 100%);
width: 50%;
height: 100%;
}
}
How would I get it to work with added borders?
Left side is 21px right side is 14px.
What would I need to adjust in the code?
.tcell {
display: table-cell;
vertical-align: middle;
padding: 0 20px;
}
Code
https://jsfiddle.net/udsav90r/2/
Full Code:
html,
body {
height: 100%;
background: #000000;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
padding: 0 20px;
}
.video-wrapper {
min-width: 40%;
max-width: 789px;
margin: auto;
}
.ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video {
border-radius: 25px;
border: 3px solid green;
}
I am developing a Wordpress site using a child theme and cornerstone page builder.
Cornerstone allows full width images with no containers for normal pages but not posts. How do I make the post include a full width image?
I want to make this: http://www.crestonsolutions.com/test-post/
Look like this: http://www.crestonsolutions.com/blog/how-to-keep-customers-coming-back-to-your-site/
Here is the CSS I've done to the site:
.x-navbar {
background-color: transparent !important;
border: 0;
}
.x-logobar{
background-color: transparent !important;
}
.masthead {
height:0px;
}
.x-nav-wrap.mobile {
background: rgba(17, 17, 17, 0.60);
margin: 0;
}
.x-btn-navbar.collapsed {
color: white;
}
#media (max-width: 979px){
.x-navbar-inner .x-container.max.width {
width: auto;
max-width: none;
}
.masthead-inline .x-btn-navbar {
margin-right: 15px;
}
.x-navbar .x-brand {
margin-left: 15px;
}
ul#menu-main-menu-1 {
width: 88%;
margin-left: auto;
margin-right: auto;
}
.x-navbar {
background-color: rgba(17, 17, 17, 0.60)!important;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.x-nav-wrap.mobile.collapse.in {
height: 100%;
position: fixed;
width: 100%;
top: 90px;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
text-align: center;
font-size: 46px;
border: none;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
}
hr.x-hr {
width: 20%;
border-top: 3px solid rgba(0,0,0,0.075);
margin: 0 auto;
}
.single-post .x-navbar {
color: black;
}
.single-post .entry-header {
display: none;
}
.single-post .site > .x-container-fluid {
max-width: 100% !important;
width: 100% !important;
}
.single-post .x-navbar a {
color: black;
}
<meta name="viewport" content="width=min-width, initial-scale=1.0">
#media (max-width: 455px) and (orientation: portrait) {
#border-search {
display: none;
}
#n-recentchanges {
visibility: hidden;
}
#n-randompage {
display: none;
}
/*sidebar appearance*/
#column-one {
background: none repeat scroll 0 0 #5B5B5B;
float: left;
text-align: center;
margin: 0 0 0 1%;
min-height: 149px;
padding: 10px 20px;
position: absolute;
font-size: 90%;
top: 5px;
height: 1px;
left: 6%;
width: 15%;
}
#n-home {
position: relative;
top: 0px;
left: -8px;
}
#n-sign-up {
position: relative;
top: 5px;
left: 0px;
}
#n-help {
position: relative;
top: 13px;
left: -4px;
}
#n-add-pix {
position: relative;
top: 19px;
left: 0px;
}
#column-content {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
margin: 0 1%;
padding: 10px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
#button .hidetext {
background: none repeat scroll 0 0 #5B5B5B;
display: block;
color: #99D9EA;
margin: 0 1%;
position: relative;
float: right;
border: 0px;
top: 95px;
left: 53%;
}
#ca-edit {
position: relative
}
/*edit page nav*/
.top_header {
background: none repeat scroll 0 0 #5B5B5B;
display: none;
float: right;
margin: 0 1% 40px;
padding: 30px 10px;
width: 60%;
height: 60px;
position: relative;
top: -370px;
left: -10%;
}
#p-cactions {
float: left;
display: none;
}
#p-cactions li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 35px 0 0;
text-align: left;
position: relative;
left: 10%;
}
#p-personal {
float: left;
display: none;
}
.top_header ul {
margin: 0;
padding: 0;
}
#p-cactions {
float: left;
}
#p-personal li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 15px 0 0;
}
#column-content #bodyContent {
color: #7b377b;
float: left;
font-size: 115%;
margin: 15px 0 15px 50px;
width: 94%;
}
#column-one h3 {
display: none;
}
#column-one ul {
margin: 0;
}
.mw-ui-vform-field {
width: 70%;
}
/*control font size*/
#column-one li {
font-size: 18px;
list-style: outside none none;
margin: 1px 0;
text-align: center;
}
/*control special page layout*/
.mw-ui-input {
width:80%;
}
#wpLoginAttempt {
width: 70%;
}
.mw-submit {
width:70%;
}
/*control search input text color and font*/
#searchInput {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 4px solid #000000;
box-shadow: none;
position: relative;
top: -60px;
text-align: center;
left: 400%;
float: right;
color: #99D9EA;
padding: 8px;
width: 92px;
z-index: 3;
}
.rectangle-box {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: block;
margin: 0 1% 40px;
position: relative;
width: 60%;
height: 130px;
left: 0%;
top: 35px;
}
.rectangle-box2 {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: none;
margin: 0 1% 0 40px;
height: 400px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
}
The media query I'm using only seems to be recognized by Chrome and Opera. I'm trying to get my site to resize with this media query, but when I change the browser window to that size the query doesn't take effect. What can I do to fix this? Is there a problem with my code? What could cause this to happen only in certain browsers?
Change viewport
<meta name="viewport" content="width=device-width">
As far as I have worked with media queries, I never used an and. And I'm sure the problem is caused by it. Remove it, and make it like this:
#media (min-width: 368px) {...}
The and will not come between #media and (min-width: 368px), but it will come between the two ()s ie:
#media (min-width: 368px) and (orientation: landscape) {...}
Edit:
I'm currently on mobile so sorry I can't test code. But I think the correct query is max-width, not min-width. So just replace min-width with max-width.
Mustaghees is correct. Remove that first "and".
Here's how it would look if you had an arbitrary background-color change when the browser size reaches min-width:368px:
http://codepen.io/sabaeus/pen/ZGOpPB?editors=110
The issue was fixed by changing the order of the media queries. They were blued out before in my coding panel. this went away by cutting and pasting the queries in a different order. Now the queries work in all browsers.
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 */