Search code examples
htmlcsswordpressresponsiveness

Change Logo settings on Wordpress in a Responsive way

I'm a newbie when it comes to coding (this is my first website) but I'm trying to modify the logo on my website. I would like to make it bigger and central. I am able to achieve this from the desktop view but it doesn't work on the mobile.

Briefly, the logo looks quite small on both devices, desktop and smartphone. So I add this code in Custom CSS (found on the web...):

.logo.logo1 {
   width:100%;
   text-align:center;
   margin-bottom:20px;

}

.logo.logo1 {
    width: 400px;
    height: 100px;
}

.logo.logo1 {
  position: relative;
  top: 40px;
  right: 130px;
}

With this in place, on my desktop the logo looks nice but on my smartphone it is small and goes too far to the very left of the screen, partially disappearing.

As I'm now approaching to coding, I have no idea whether it depends on a potential logo container or how to make it responsive on the smartphone. Truth is that the more research I do, the more I get confused.

Any help about how to fix this would be very appreciated :)

P.S. the website is this one

Gio

Solution

  • Add this to your css at the bottom.

    @media (max-width: 767px){
   .logo.logo1{
     max-width: 100%;
     width: 100%;
     position: static;
     top: 0;
     right: 0;
     height: auto;
   }
}

    Basically, what's going on here is that you are overriding a bunch of styles that your theme applies that make it tiny on small devices.