Need help with logo size

This topic has 31 replies, 2 voices, and was last updated 4 years, 3 months ago by Skandha.

Viewing 20 posts - 1 through 20 (of 32 total)

1 2 →

Author

Posts
June 28, 2020 at 6:09 pm #251485

Jyotirmoy Dey
Participant

Hi, my site http://www.thesaladguy.cool . I want to resize the size of logo. But if I’m doing so, then it is creating issue with small screen size, its overlapping the silver text, and is there an option to customize mobile view? How do I disable the slider for mobile device? Thanks

June 29, 2020 at 1:35 am #251497
Skandha
Participant
@jyo: Hello there,
Go to => Appearance => Customize => Additional CSSh and add the following CSS Code.
```
@media screen and (max-width: 64em) {
	.custom-logo {
	    max-width: 100px;
	}
}
@media screen and (max-width: 568px) {
	.custom-logo {
	    max-width: 50px;
	}
}
```
Let me know if this solves your issue.
Kind Regards,
Skandha
July 1, 2020 at 2:53 pm #251748

Jyotirmoy Dey
Participant

Thanks. It worked.

How to make the slider more mobile friendly? The slider overshadows my logo in mobile view. Can the slider image me a little smaller?

July 2, 2020 at 12:01 am #251782

Skandha
Participant

@jyo: Hello there,
At my end the slider image seems to be showing up fine even on mobile screens. Can you attach me a screenshot of where the slider image is overlapping the logo?

Kind Regards,
Skandha

July 2, 2020 at 4:56 am #251789

Jyotirmoy Dey
Participant

Also check this, the text overlaps if the length of the viewport is small.

July 2, 2020 at 4:59 am #251790

Jyotirmoy Dey
Participant

https://ibb.co/txZDPb6

July 3, 2020 at 2:12 pm #251888

Jyotirmoy Dey
Participant

Any help here please?

July 4, 2020 at 7:53 am #251957
Skandha
Participant
@jyo: Hello there,
Please replace the above CSS Code with the following CSS Code
```
@media screen and (max-width: 568px) {
	.custom-logo {
	    max-width: 50px;
	}
}
@media screen and (min-width: 568px) {
	.custom-logo {
	    max-width: 100px;
	}
}
```
This should resolve your issue on devices.
Let me know if this works out!
Kind Regards,
Skandha
July 5, 2020 at 12:08 pm #252061

Jyotirmoy Dey
Participant

Well this just fixes the logo to a small 100px which I didn’t want. But the first solution works. I will use media query to replace the logo with the viewport size.

Another area I require help is, the MENU. How do I make the pages in my menu visible outside individually instead of grouping all inside the MENU button. I want my SHOP and EXPERIENCE menu to be independently visible and not inside MENU.

July 5, 2020 at 5:30 pm #252076

Jyotirmoy Dey
Participant

Tried putting a monogram logo for smaller viewport

@media screen and (max-width: 568px)
{
.custom-logo {
background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png”) !important;
max-width: 250px;
}

but its not working. How do I have a different logo at a different screen size?

July 5, 2020 at 5:52 pm #252077

Jyotirmoy Dey
Participant

@media screen and (max-width: 487px) {
.custom-logo {
background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png”) !important;
}
}

pardon the above code.

July 6, 2020 at 4:29 am #252106

Skandha
Participant

@jyo: Hello there,
To make menu items visible
Go to => Appearance => Customize => Theme Options => Menu Options => Menu Style => Select Classic and Publish.

I am afraid it is not possible to upload two logo images for different view ports. If you really need it I suggest you to hire a customizer.

Kind Regards,
Skandha

July 6, 2020 at 2:34 pm #252156

Jyotirmoy Dey
Participant

I did the change to classic menu, nothing changed at all?

July 7, 2020 at 5:29 am #252150

Jyotirmoy Dey
Participant

Why is that a limitation when i can edit my style.css?? I can add a media query to display a monogram of my logo in a smaller screen and mobiles. Can you please elaborate?

July 7, 2020 at 6:30 am #252216

Skandha
Participant

@jyo: Hello there,
If you have made any changes to the style.css file, I suggest you not to as all your changes will be lost when you update the theme to newer versions. Please use the Additional CSS section to add any CSS Codes.

It is very difficult to add a different logo image and require lots of customization to be made. As you can see using the CSS background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png"); is not enough.

Kind Regards,
Skandha

July 7, 2020 at 4:50 pm #252269

Jyotirmoy Dey
Participant

That is the reason wordpress has option to create child themes! Please tell me the changes for the css as I feel having purchased the theme should give me the flexibility to change the codes. And, though a simple media query works for other themes, if there is something else required for your particular catch theme I would appreciate you telling me where the necessary changes are to be made even if you cant help me with the code itself.

July 7, 2020 at 4:53 pm #252270

Jyotirmoy Dey
Participant

Atleast guide me to the html file that contains the logo in the markup. I will handle the css part.

July 8, 2020 at 1:04 pm #252369

Jyotirmoy Dey
Participant

Awaiting your response eagerly.

July 9, 2020 at 6:27 am #252456

Jyotirmoy Dey
Participant

Anything?

July 9, 2020 at 8:38 am #252481

Skandha
Participant

@jyo: Hello there,
Since there is only single option to add a logo in the header you will need to use CSS to use another logo of your choice. As much I would like to help you on this issue, this is beyond our support scope. So, If you really need this I suggest you to consult a professional.

Let me know if you have any other issues.
Kind Regards,
Skandha
Author

Posts