The Logo via cell phone - My biggest disappointment

I hope someone can help me correct my biggest disappointment with the GeoCraft theme, the logo.

Thanks to this forum, I finally figured out how to make my logo larger when viewed from a desktop computer. My problem is when viewing via a cell phone (used a Samsung Galaxy S3). As you can see from the first picture below, the logo is actually not as wide as the "List your business..." button. I would want the logo to be much larger with some space on either side of it. On the logo, where it says "small text is hard to read" is much harder to read on my cell phone screen"

At the bottom of this post you can find what is in my Custom CSS box.

Viewed from my cell phone

***************************************************
View from my desktop computer

*****************************************************
Below is what is in my custom CSS box:

.flexslider .slides img{
height: auto;
}
.header_wrapper .header,
.footer_wrapper{
background: #8C72B2 !important;
}
.top_strip,
.footer_bottom{
background: #461D7C !important;
}
.header_wrapper .header .post_btn {
background: #FDD023;
}
.footer_wrapper .footer_widget h5{
background: none !important;
border-bottom: 2px dashed #FDD023 !important;
}
.footer_wrapper .footer_widget ul{
list-style-image: none !important;
}
.footer_bottom .copy_right {
color: #FDD023 !important;
}
.textwidget p a img {
width: 100% !important;
}
.header_wrapper .header_btn a span.btn_center {
color: #461D7C ;
}
.logo a img {
width: 100% !important;
}

 

Hello Cayenne!

Could you please provide me URL of your website?

Thanks,
Praveen

 

http://www.shopmossbluff.com/

 

Hello Cayenne!

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (min-width:481px)and (max-width: 767px){
.header_wrapper .logo_wrapper .logo img {
  max-width: 100%;
}
.logo img {
  width: 80%;
}
}
@media only screen and (max-width: 480px){
.header_wrapper .logo_wrapper .logo img {
  max-width: 120%;
}
.logo img {
  width: 105%;
}
}

Please adjust width value according to your requirement.

Thanks,
Praveen