Hi, we’re using a black fullwidth background color on some of our sections in Pro, but when viewing on a mobile device – those same backgrounds revert to white or transparent. I notice in my inspector that the breakpoint for those sections is 480px.
@media (min-width: 480px)
But I’m not sure why. This only happens on pages that I’ve built SINCE the November Cornerstone builder update. Ideally, those backgrounds would remain the same as we’ve designated in the builder.
Any ideas or help?
Hi there,
Please provide the URL of the site you are working on so that we can check it.
Thank you.
Hi there,
The background color for the first section seems to be set through CSS which is only for devices 480px or greater width.
Please try adding this code in the cornerstone custom CSS:
@media (max-width: 480px) {
.el1.x-section {
background-color: hsl(0,0%,0%);
}
}
Hope this helps.
That code fixed the problem for that section, but it happens with any new section I create. I can’t find anywhere in my custom css where the background color is set. Maybe you can help? Here is everything in my custom css:
.x-btn {
font-family: proxima-nova;
font-weight: 600;
}
.overlay-outer { position: relative; }
.overlay-outer img { margin: 0; }
.overlay {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.3);
display: block;
width: 100%;
padding: 10px;
color: #FFF; }
.overlay { bottom: -65px; transition: bottom 0.5s linear; }
.overlay-outer:hover .overlay { bottom: 0; }
@media only screen and (max-width: 767px) {
.resp-header{
font-size: 100%;
}
}
body .x-navbar ul.sub-menu li a {
font-size: 14px;
}
@media only screen and (max-width: 479px) {
.resp-header{
font-size: 75%;
}
}
.x-cite {
color: white
}
.x-blockquote {
font-family: baskerville;
color: white;
}
.ubermenu-bar-align-right {
float: right;
padding-right: 25px
}
@media (max-width: 979px) {
.x-topbar {
display: none;
}
}
.x-topbar-inner .x-social-global { display: none; }
.x-topbar .p-info a {
border-bottom: 0px dotted;
font-family: baskerville;
font-size: 13px;
letter-spacing: 1px;
}
.x-topbar {
background-color: rgba(0, 0, 0, 0.0225);
}
.x-navbar .desktop .x-nav > .current-menu-item > a{
background:none;
box-shadow: none;
}
.x-searchform-overlay .form-search .search-query {
font-size: 5em;
text-transform: none;
}
.x-topbar .p-info {
float: right;
position: relative;
left: -41%; /* or right 50% */
text-align: left;
}
.eg-um-element-3 {
letter-spacing: 1px
}
.x-colophon.bottom .x-social-global a {
margin: 0 1.25%;
font-size: 32px;
}
.x-colophon.bottom .x-colophon-content {
margin: 30px 0 10px;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1.3;
}
.x-recent-posts .x-recent-posts-date {
font-size: 15px;
text-transform: none;
}
.h-landmark {
letter-spacing: 3px;
text-transform: uppercase;
}
h4.tribe-event-title {
font-size: 17px;
letter-spacing: 0.051em;
margin: -1px 0 5px;
}
span.tribe-event-date-start {
font-size: 15px;
color: rgba(0,0,0,0.65);
}
span.tribe-event-date-end {
font-size: 15px;
color: rgba(0,0,0,0.65);
}
span.tribe-event-time {
font-size: 15px;
color: rgba(0,0,0,0.65);
}
.widget ul li a, .widget ol li a {
border-bottom: none;
}
.x-breadcrumb-wrap {
font-size: 13px;
}
.x-breadcrumbs .home .x-icon-home:before {
content: “Home”;
font-family: “proxima-nova”;
}
.x-breadcrumbs {
float: left;
width: 100%;
font-size: 13px;
}
//@media screen and (max-width: 1190px){
.x-navbar .x-nav > li > a {
font-size: 14px !important;
padding-left: 15px;
padding-right: 15px;
}
//@media screen and (max-width: 1120px){
.x-navbar .x-nav > li > a {
font-size: 13px !important;
padding-left: 10px;
padding-right: 10px;
}
.h-author {
font-family: baskerville;
}
p.p-meta span:nth-child(2):before {
content: "By ";
}
p.p-meta span:nth-child(3):before {
content: "On “;
}
.p-meta>span:after{
content:” ";
}
.x-menu li[data-x-collapse=“opening”] > .sub-menu {
height:auto !important;
}
.x-menu .sub-menu {
height: auto;
}
.x-accordion-heading .x-accordion-toggle {
font-family: “proxima-nova”;
font-weight: 500;
}
@media (max-width: 480px) {
.el1.x-section {
background-color: hsl(0,0%,0%);
}
}
As I said before, I didn’t have this issue prior to the cornerstone update in November.
Hi there,
What new section? To make sure you’re applying it to your preferred sections then change that CSS to this
@media (max-width: 480px) {
.section-black-background.x-section {
background-color: hsl(0,0%,0%);
}
}
Then you can inspect your section and go to customize area and add section-black-background to a Class input field. With this, you can do the same in any of your sections without re-adding any of CSS.
Thanks!
Ok – let me clarify a little. What I don’t understand is how the background color that I designate for each section in the cornerstone builder does not apply to mobile devices under 480px. I realize that I can go back and add the code you just gave me in the css – but why am I having to do that in the first place? I’ve never had to specify background colors to show up on desktop and mobile. They’ve always been applied to the section for every responsive width. I cannot find a setting in the builder nor can I find in the css that I posted above any code that would remove the background color designated in the builder for devices under 480px.
Does that make sense?
Hi There,
Most likely there is a syntax error on your custom CSS that caught up the generated [background-color: hsl(0,0%,0%);] CSS inside the @media (min-width: 480px) query block.
Would you mind removing this commented line from your custom CSS?
//@media screen and (max-width: 1190px){
//@media screen and (max-width: 1120px){
This can also be a caching issue, please clear any caching feature your site might have.
If nothing works, please provide us login credentials in a secure note so we can take a closer look.
Cheers!
Hello There,
Are you trying to override the background color in smaller screens? Please make use of this code instead:
@media (max-width: 480px) {
.el1.x-section {
background-color: hsl(0,0%,0%) !important;
}
}
!important is needed t force the background color to take effect…
Please let us know how it goes.
No, I’m not trying to override the background color. Let me start over.
I created a new page and decided that I want some of my section background colors to be black. So, I used the Section>Setup to make the background color of each section black. My assumption is that the section will always have a black background when used across devices (desktop, tablet, mobile).
However, when viewed on a mobile device – the black background is no longer there and it changes to a transparent background instead. I notice in my inspector that there is a query for each section: @media (min-width: 480px) that may be forcing this to happen.
What I want out of all of this is for my background color that I set for each section in the builder to remain the same across platforms. And my confusion is due to the fact that it changes under 480px. I don’t even know why that query exist because I don’t have it anywhere in my custom css (unless you can see it in the custom css I posted above.
Does that clarify and can you help me resolve?
Hi There,
Upon checking your page.
Seems like you edited it outside of Cornerstone, seems like the content is mixed of CS structure with HTML. Your page does work but is not editable with CS
I could not check the Theme Options as the provided user seems to have some limitations.
To fix the specific section issue, you can add the following CSS to Theme Options CSS
.page-id-17894 .el1.x-section {
background-color: hsl(0,0%,0%);
}
Hope it helps
Hi, I have updated admin privileges so you can look at theme options and help me resolve. Thanks for your help!
Hi There,
I removed the following code to Theme Options CSS and the issue seems to be resolved.
@media (max-width: 480px) {
.el1.x-section {
background-color: hsl(0,0%,0%);
}
}
Please take a look.
This code you had added, maybe aiming a different page, it is really generic and will affect all pages of your site pretty much. So if you did add this code for a reason it is recommedable to use the specific page id before the section selector as I provided before in order to make the code page specific.
Hope it helps.
Thanks
No, the black background is still missing on my mobile device. Any thoughts?
Hi there,
I see what you mean and this is the first time I’m seeing this issue, I’ll continue checking. But for the meantime, you can toggle on the Advanced to see other background options, I set the background color to black through that and it should be working now.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.