• The Cobalt Apps Community Forum is for community interaction and assistance, but is not our official Cobalt Apps Product Support solution. If you need Cobalt Apps Product Support please contact our support team through the contact form found at the bottom of your "My Account" page.

Responsive Anomaly — Entry Content Cut-off on Left-Side

#1
Hi Everyone— And Happy Chinese New Year

This one's got me stumped.

My pages on BuySubliminal.com have some horizontal play— moving a couple centimeters from left to right.

But the real problem is that the .entry-content is cut off on the right-hand side. Get this, it is only cut-off for one media query— for the DWB/Design/Responsive—Tablet Landscape Cascading @media query (1st) which is set to 1024px— (Ipad Pro 1024x1366).

It also only occurs on Firefox, I haven't tested it on Chrome, but on Safari the responsive page loads as it should.

I've tried everything I could think of to fix the issue but am out of my depth. Any help would be most appreciated.

Maybe there is a syntax error that I'm overlooking.

Here are the styles that I've entered in the Query Box.


/* HOME CUSTOM WIDGET AREAS*/

.top-home-left {
float: left !important;
width: 50% !important;
max-width: 100% !important;
}

.top-home-middle {
float: left !important;
width: 50% !important;
max-width: 100% !important;
}

.top-home-right {
float: none !important;
width: 90% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* HOME TYPOGRAPHY*/

body.page-id-4 .content .page .sub-title {
margin-top: -0.3em !important;
}

body.page-id-4 .content .page h2 {
margin-top: -1em !important;
font-size: 2.4rem;
}

body.page-id-4 .content .page h5 {
font-size: 1.8rem;
text-transform: uppercase;
padding-top: 0.39em;
padding-bottom: 0.135em;
}

body.page-id-4 .content .page h3 {
font-size: 2.2rem;
padding-top: 0.39em;
padding-bottom: 0.135em;
}

/* HOME IMAGES*/
body.page-id-4 .content .wp-image-5471 {
width: 350px;
max-width: 100%;
}

body.page-id-4 .content .caption-attachment-wrap-right {
float: right;
width: 350px;
max-width: 100%;
padding-left: 1.39em;
padding-bottom: 0.618em;
}