[Brian]

My mobile site http://www.djbriswatek.com looks correct to me on Safari, but the spacing / size of the text is “off” on Chrome. I can send screenshots if that helps. The text seems to scale to size properly in Safari. The title and description sit in the header alongside the hamburger menu. The body text sizes appropriately on different sized phone screens. In Chrome, the text does not resize and the title and description drop down below the hamburger menu. Is there a css or settings fix?

[Skandha]

@briswatek: Hello there,
Can you please attach me the screenshots of the issue so that I can look into it?

Kind Regards,
Skandha

[Brian]

Could it be something to do with the line

@media screen and (max-width: 1024px)

?

How would I fix that?

Here is my custom CSS:

.grecaptcha-badge {
display: none;
}#site-branding {
display: block;
text-align: center;
width: 100%;
}

#site-header {
width: 100%;
}

.site-title { font-size: 42px; }
.site-description { font-size: 18px; }

@media screen and (max-width: 1024px) {
.site-title { font-size: 24px; }
.site-description { font-size: 14px; }
}

.menu.catchresponsive-nav-menu, #menu-main {
float: none;
text-align: center;
width: 100%;
}

.catchresponsive-nav-menu li { float: none; }

/* Slider Dot Color */
#feature-slider .cycle-pager span { color: #ffffff; }
/* Slider Dot Active Color */
#feature-slider .cycle-pager span.cycle-pager-active { color: #D7BC95; }

#feature-slider { padding-bottom: 0px; }

.site-content article {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}

.hentry {
-webkit-hyphens: manual;
-moz-hyphens: manual;
hyphens: manual;
}

#content a:hover {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

a:hover {
color: #BB7711;
}

a:focus,
a:active,
a:hover {
text-decoration: none;
}

#content a:focus,
a:active,
a:hover {
text-decoration: none;
}

[Brian]

Of course:

Scales correctly:

https://djbriswatek.com/mobilesafariscreenshot/

Does not scale correctly:

https://djbriswatek.com/mobilechromescreenshot/

[Skandha]

@briswatek: Hello there,
Can you try removing the Additional CSS code you have added and check if the issue persists?

Kind Regards,
Skandha

[Brian]

Yes, I removed all the CSS and no change. The title still falls below the hamburger menu in Chrome. It lines up correctly in Safari. The site seems to resize correctly in Safari, but not in Chrome.

[Skandha]

@briswatek: Hello there,
This seems to be happening only on Chrome no IOS. I checked your site on Chrome on Android and it was showing up fine.

Kind Regards,
Skandha

[Author]

Posts