So I’m trying to create a new button on our home page in the mobile version. Everything looks great on when previewing it, but after saving and loading it looks awful.
ACTUAL Safari Browser iPhone Max: https://www.dropbox.com/s/ondf6uwazmqowr8/Actual.PNG?dl=0
Preview in Theme: https://www.dropbox.com/s/he1tp6pgo8qbtvk/Not%20Actual.png?dl=0
How do I get those buttons to load right?
Hi @treytaulbee,
Thank you for reaching out to us. I checked your setup and it looks like you’ve a missing curly bracket in your custom CSS added either in the Theme Options > CSS or in the page level CSS section in Pro Builder. Please look out for this piece of code:
@media (min-width: 480px) {
#menu-item-14415 {
display:none;
}
.page-id-2 .x-breadcrumbs {
display: none;
}
And add a closing curly bracket at the end so your code will be:
@media (min-width: 480px) {
#menu-item-14415 {
display:none;
}
.page-id-2 .x-breadcrumbs {
display: none;
}
}
Because of the missing curly bracket, all of the dynamically generated CSS is being wrapped in the above media query.
Let us know how this goes!
I cannot seem to find where this line is located.
Please check in your Header CSS or Content CSS.
Thanks.
I checked both and I did not find it.
My Global 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;
}
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;
}
.attachment .p-meta {
display: none;
}
h5 {
font-weight: bold;
}
.x-author-box .h-about-the-author {
color: #A32136;
font-weight: 700;
}
Content CSS
.hm17.x-bar {
display: none;
}
Hi @therooftop,
Thanks for writing in!
Can you please update your theme to latest version and let us know of that fixes your issue.
I can see you are using a very older version of theme.
If you could please try the above and if you still have the issue we’d be more than happy to assist.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.