Ps. I still need to figure out these media queries. It's always an issue when viewing a site on mobile, where a client asks for bigger font when he holds his phone vertically. In addition to the font being too small, there are gaps that are too big in between the middle three photo/columns.
So I also have in my css:
@media only screen and (min-width: 0px) and (max-width: 768px) {
body {font-size: 110%;}
html {-webkit-text-size-adjust: 100%;}
.p7HMY .hmy-section .p7HMY .hmy-section {flex-basis: 100% !important;}
.p7HMY.hmy-legacy .hmy-section .p7HMY .hmy-section {float: none !important; width: 100% !important;}
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
body {font-size: 110%;}
.p7HMY .hmy-section {flex-basis: 100% !important;}
.p7HMY .hmy-section .hmy-content-wrapper {border-radius: 0px !important; border-left: none !important; border-right: none !important;}
.p7HMY.hmy-legacy .hmy-section {float: none !important; width: 100% !important;}
}
I increased font size to 110%, but I don't see any changes in the font size. I'm wondering if there's a cache issue. I used to be able to make changes on the fly, upload via FTP, refresh browser, and see my changes reflected instantly. Now, it's like an hour later. Weird and frustrating for a designer. I typically use Safari on a Mac and my phone, but also use chrome a lot, too and the same thing with changes not selecting for an hour.
Thank you,
Chris