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

[amandahollander]

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 - thegetawaythebrand.myshopify.com 

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!!!

[Artzen_tech]

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
Regards,
Artzen Technologies

[AbdulSammad]

It doesn't do anything at all