New Shopify Certification now available: Liquid Storefronts for Theme Developers

CSS not rendering on mobile - Have already tried almost everything! SOS!

Shopify Partner
1 0 0

Hello! I have been custom developing this site - I've built a lot of custom sections and added a lot of CSS as well as custom fonts.


Here is the URL - 

password: getawaycomingsoon


When I preview the site on my desktop and switch over to mobile via Chrome Dev Tools, everything looks perfect. HOWEVER, when I look at the site on my actual mobile device (iPhone), none of the fonts are rendering, my images are crazy sizes, and about half the CSS doesn't seem to be rendering.


What can I do here? I've validated my code and checked everything, including how the fonts are added. I've also checked while in incognito mode on my phone's browser. Help!!!

Reply 1 (1)
Shopify Partner
521 105 105

Hello @amandahollander 

Its Artzen Technologies! We will be happy to help you today.


Go to the Online Store->Theme->Edit code->Assets->base.css>

Paste this css at bottom of base.css file


@media screen and (max-width: 768px){
	.TGhero .column2snapshot .captiondiv {
		margin-right: 0;
	.TG3polaroids .subcolumn.subcolumn1 {
		margin-left: 0; 
	.subcolumn .image {
		width: 100%;
	.TG3polaroids .subcolumn.subcolumn2 {
		margin-top: 0; 
		margin-right: 0; 
	.TG3polaroids .subcolumn.subcolumn3 {
		margin-top: 0;
	.TG2column .column.column-2 {
		margin: 0% 0 0% 0% !important;



Let me know if need further assistance
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify