In the footer section of my document, I have text positioned next to an image (floated to the right). However, when I resize my browser to a minimum width of 768px, both the text and image lose alignment. My goal is to centralize both elements with the image above the text, but I'm struggling to achieve this.
Below is an example of what I am trying to accomplish along with my current code:
HTML :
<div id="wrapper">
<footer id="page_footer">
<p>Thanks for visiting</p>
<a href="#" target="_blank"><img alt=
"nffc_logo" src="images/logo.png"></a>
</footer>
</div><!-- wrapper -->
CSS :
#page_footer {
width: 100%;
height: auto;
position: absolute;
bottom:0; /*sticky footer*/
left: 0;
background: #282828;
color: white;
}
#page_footer img {
max-width: 3%;
height:auto;
margin: 5px;
float:right;
}
#page_footer p {
float:right;
margin-right: 10px;
margin-left: 1px;
}
and then an empty media query :
@media screen and (min-width:768px) { }