Increasing the Logo Size for Mobile using the Bedford Template

Good afternoon, 

I have been attempting to increase the logo image size for the mobile view. I have tried several different methods found in the forums, such as the one included below:

@media only screen and (max-width: 640px) {

#logo {
    height: 100% !important;
    max-height: 100% !important;
    width: auto;
    max-width: 100% !important;
    }
}

The website is: ubcontractor.com

I am using the Bedford Template. 

Would greatly appreciate any help. Thank you so much. 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
#logoImage img {
    max-width: 300px !important;
}}

Hello and thanks in advance for any help you may be able to offer.

I am having similar mobile logo issues. The logo is too small on mobile and I can't seem to increase its size. I have tried the code kindly suggested by @tuanphan BUT sadly I don't get any results. 

@media screen and (max-width:640px) {
#logoImage img {
    max-width: 300px !important;
}}

I do get some action if I change 'max-width' to 'min-width' but this does not maintain ration.

Any help would be ever so appreciated. Thanks, Alex  

11 minutes ago, AlexCP said:

Hello and thanks in advance for any help you may be able to offer.

I am having similar mobile logo issues. The logo is too small on mobile and I can't seem to increase its size. I have tried the code kindly suggested by @tuanphan BUT sadly I don't get any results. 

@media screen and (max-width:640px) {
#logoImage img {
    max-width: 300px !important;
}}

I do get some action if I change 'max-width' to 'min-width' but this does not maintain ration.

Any help would be ever so appreciated. Thanks, Alex  

Difficult to help without checking site url

Hi @tuanphan, thanks very much for the swift reply and sorry I was unable to share the site URL.

Please find details below:

URL - https://materialworldfoundation.squarespace.com/
PW - MWL

Any help to get the logo bigger on mobile would be ever so appreciated and would certainly make my day : )

3 hours ago, AlexCP said:

Hi @tuanphan, thanks very much for the swift reply and sorry I was unable to share the site URL.

Please find details below:

URL - https://materialworldfoundation.squarespace.com/
PW - MWL

Any help to get the logo bigger on mobile would be ever so appreciated and would certainly make my day : )

Incorrect password

Hi @tuanphan, very sorry about the PW. It really isn't my name.

Please find correct details below:

URL - https://materialworldfoundation.squarespace.com/
PW - MWF

Any help to get the logo bigger on mobile would be ever so so appreciated and would certainly improve my day no end : )

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
h1#logoImage img {
    max-height: 200px !important;
    max-width: 300px !important;
}
}

Hi @tuanphan, you are a super star. Thanks ever so much for the swift assistance. Really very much appreciated. Thanks and enjoy the rest of your day, Alex

2 minutes ago, AlexCP said:

Hi @tuanphan, you are a super star. Thanks ever so much for the swift assistance. Really very much appreciated. Thanks and enjoy the rest of your day, Alex

Yeah. Good night 😅

On 2/23/2020 at 4:26 AM, tuanphan said:

Difficult to help without checking site url

https://hulseygardens.squarespace.com/

Password: 1234

Hi Tuanphan, Thanks so much for all your help in this community. I am having the same issue and would greatly appreciate for you to take a look at my mobile logo image size and advise what CSS code to use to increase the size f this logo on mobile/tablet view. Thanks again in advance. 

On 4/26/2020 at 12:34 AM, CarolynSmith said:

https://hulseygardens.squarespace.com/

Password: 1234

Hi Tuanphan, Thanks so much for all your help in this community. I am having the same issue and would greatly appreciate for you to take a look at my mobile logo image size and advise what CSS code to use to increase the size f this logo on mobile/tablet view. Thanks again in advance. 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo img {
    max-height: 100px;
}
}

On 4/27/2020 at 4:02 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo img {
    max-height: 100px;
}
}

 

This worked great, thank you!