Currently in the process of creating my own personal website, I have been diligently using Chrome Canary to ensure that all my media queries are properly set up. While everything looks great on Canary and functions well in various device modes within the browser, the issue arises when trying to view the page on an iPad, iPhone, or Blackberry, as it does not display correctly. On mobile phones, anything below the "Featured Work" section fails to appear at all. On iPads, the content after the "Featured Work" section appears condensed into a single column spanning 33.33% of the page width. This inconsistency has left me puzzled.
To sum up my query: What key element am I overlooking in my HTML or CSS files that would rectify the layout problems on iPads and iPhones?
In the head section of my HTML file, I have included:
Initially, the sole media query present was:
@media only screen and (max-width: 767px)
Upon realizing this didn't suffice for iPads and iPhones, I subsequently added:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
While testing in Chrome, everything seemed fine until images became too small (around 800px), resulting in font size discrepancies as the page scaled down. I opted to restructure the lower portion of the page (beneath "Featured Work") utilizing the "@media only screen and (max-width: 767px)" query.
The peculiar display issues persist on my iPad, despite several attempts to address them with variations in display properties such as flex, inline, or box. None of these adjustments proved successful.
In attempting to tackle the iPhone problem, I experimented with duplicating the content under the "@media only screen and (max-width: 767px)" and placing it beneath the "@media only screen and (min-device-width : 320px) and (max-device-width : 568px)" query. Regrettably, this did not yield the desired outcome.
I have yet to explore the option of entirely rewriting my CSS file. My initial inclination is to consider adjusting the div widths to specific pixel values rather than percentages, based on the fixed widths of these devices. Yet, this approach seems somewhat excessive.