This is the page: https://umobile.edu/library/
On mobile, the first row disappears and you get a big white area.
Also the H5 doesn’t wrap.
Not sure what’s going on.
Hello @treytaulbee,
I have inspected your site and I found out that a broken css has caused the issue. You have added an unclosed @media block:
@media (min-width:480px){
#menu-item-14415{
display:none;
}
.page-id-2 .x-breadcrumbs{
display:none;
}
.page-id-2 .hm16.x-bar{
display:none;
}
body{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
The correct code should have been this:
@media (min-width:480px){
#menu-item-14415{
display:none;
}
.page-id-2 .x-breadcrumbs{
display:none;
}
.page-id-2 .hm16.x-bar{
display:none;
}
body{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
}
Please find this piece of code and closed it properly so that it will not affect other custom css in the page.
Hope this helps. Kindly let us know.
I can’t seem to find that code anywhere. Here’s what we have on the main site theme options… on that page itself we just have two regular classes that shouldn’t be interfering with that. No media queries. I don’t see a media query for 480 on this on… anywhere else it might be hiding?
.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;
}Hello @treytaulbee,
Thanks for updating the thread. 
Please check under Pro Theme options panel (Pro > Theme Options > CSS) and Child theme CSS file (Appearance > Theme Editor).
Thanks.
CSS attached above is from my Pro Theme options panel and my Child Theme has no extra CSS. Where else?
Ok I found where that media query was and closed the tag, but still having the issue. Any other ideas?
Ok fixed where the top bar was completely going away so that’s nice. Now I’m wondering how can I get my H5 to wrap? The “Find books…”
Hi @treytaulbee,
To make it wrap, you can add the code below in Theme Options > CSS
body h5 {
white-space: normal;
word-break:normal;
}
Hope that helps
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.