Custom CSS & media query for footer image

DTE_bali · January 2017

Hi.

I'm trying to reach an end result that will make the logo at the footer of www.baliveganfestival.com to be horizontally centred when viewing on screens under 960px;
I've been trying to do so by inserting the image in a div and make a media query for it as demonstrated below:

<html>
<head>
<style>
.logo_footer {
    position: absolute !important;
    left: 10px !important;
    margin-top: 15px !important;
}


@media only screen and (max-width: 959px) {
  .logo_footer {
    position: relative !important;
    margin-left: -95px !important;
    width: 190px !important;
    height: 153px !important;
    left: 50% !important;
  }
}
</style>
</head>
<body>

<div class="logo_footer">
        <img src="http://www.baliveganfestival.com/wp-content/uploads/2016/09/bvf_logo_ftr.png" />
</div>

</body>
</html>

It's working fine as long as I'm logged in as the admin. but if I'm logged out or when general public viewing it, the section is being override by the theme default settings of "image_wrapper".

What I'm I missing here?

Thanks!

Albert · January 2017

Hi,

to center footer logo, you need to wrap image into div with custom class name and the you need to set text-align: center style for this div where the footer logo is.

Custom CSS & media query for footer image

Comments