Public Forums 71,145 posts

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#1064752

I know, I know another image logo question and if it’s been solved in the past and I didn’t find the post I apologize for asking this yet again……..

So putting a logo image in the Custom Logo section under Theme Customizer is easy enough but that image isn’t responsive.

Is there a way to make it responsive?

I used a custom module to put the logo in and assign it to the banner-top position which in that position the logo is responsive – problem is it’s on the right. I need this same functionality only in the left position.

Should I create a new block above or below the current header section so I can use a module on the left if that is the only way to make my logo image responsive? If this is the answer then how (with this template) do I do this without having to worry about template updates overwriting it if there are updates to the template? I have created many new blocks in the t3 blank templates which was easy enough to do but I’m guessing it’s a little different with this template?

Or can Header Left somehow be made into a module position if no logo is present in Theme Customizer? I don’t know just throwing ideas out there.

Thanks all.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1064782

Hi
Can you share the URL of site and a screenshot of the issue?
It will help me to know the exact issue and suggest you changes.

Regards

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#1064797

The 1st image in the attached pdf shows the size the image logo defaults to under the templates Theme Customizer. I’m guessing those dimensions are default because it works on smaller devices.

The image I am working with is twice the size which is the 2nd image and the 3rd image shows my screen resized and the logo image not being responsive.

Regarding the part of my question asking about creating new blocks, is that another forum question?

Thanks Pankaj

---

Attachments:

1. simpli-image-logo.pdf

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1064802

Hi
Kindly share the URL of site here, so i can check the logo image width issue.

Regards

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#1064977

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065158

Hi
The site is offline and login details are not working.
Please check: http://prntscr.com/gs4nhu

Regards

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#1065328

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065396

Hi
Add below code in custom.css file to fix it

a.logo strong {
    background-size: contain;
}

@media (max-width: 480px) {
a.logo strong {
    width: 100%!important;
    height: auto;
}}

Regards

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#1065557

Hello Pankaj,

Thank you but unfortunately this does not work. When you add the image under "Theme Customizer" it asks for dimensions which you have to enter in pixels, you cannot use "auto" for width and height or the image logo does not show.

Now I will say if you are on your smartphone and turn it in a landscape position the logo is completely visible (whether I use your code or not) but if you keep the smartphone in the portrait position, the logo is cut off (which the code you provided does not fix).

I suppose I could make life easier and just make the image small or is there another way to add the logo without using Theme Customizer?

In my original question I asked about how to create new positions? Is this my other option? If so, how with this template might I do that?

Thank you.

• This reply was modified 6 years, 6 months ago by  krumz.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065613

Hi
The mobile screen size is limited in width and if you added more width it will cut the logo,
The code i suggest is for mobile only and does not change logo size in large display you can use it.

To create new module position here is documentation.
You can define the position in the index.php file in the template folder.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. krumz

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#1065899

OK, thank you.

Didn’t realize creating new positions for ja_simpli was like I’ve done for t3bs3blank. Awesome.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065939

You are welcome!

[Author]

Posts