Currently, I am honing my skills in using flexbox to create footers. Although the footer layout I have designed looks great on a desktop screen, it unfortunately doesn't display correctly on mobile devices.
You can view the footer layout I have been working on here: http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/
When adjusting the size of the footer on a desktop, the media query functions properly and transitions from a column layout to a row smoothly:
@media (min-width: 850px) {
.footer {
display: flex;
padding: 10px;
flex-flow: row;
}
However, when viewed on a mobile device, the footer content remains in a row rather than transitioning to a column as expected. It seems that the original flex-flow property, which is set to a column layout for screens under 850px, is not being applied:
.footer {
display: flex;
padding: 10px;
flex-flow: column;
justify-content: center;
}
I suspect the issue lies in the footer not resizing correctly. The width of the footer on a mobile device is displaying as 980px, causing it to remain in a row format. I am puzzled as to why it is not shrinking proportionately as it does when resized on a desktop window.
Any assistance or insights would be greatly valued!