SVG / Header / Incorrect resizing on mobile

Posted in: Newspaper
Post count: 74

I have a (Header logo) element added to my header. I set an SVG image for this. When I check the different (viewports) for this header, the SVG image gets resized properly except when the (Phone viewport) is selected.

Website URL: https://www.wheredoitakethekids.com/

Instructions:
1) Load the website URL in a browser on a laptop
2) Load the website URL in a browser on a mobile phone
3) Compare the logo images. The logo image is the handwritten (Where Do I Take the Kids?).

Post count: 18283

Hello !

For SVG you will have to edit the size from here on each viewport: https://www.screencast.com/t/bgKUmTWDQ

Thank you !

Post count: 74

I couldn’t get your advice to work. No matter what I put in (SVG width) field for the (Phone viewport) tab, the image doesn’t resize. I don’t see the change on my laptop or on my phone when I tested it out.

I tried using the following values for the (SVG width): 50%, 10%, and auto.

Post count: 18283

Hello !

Please make sure that your cache is clear, or try from a different device. Also make sure you refresh your page when you change the view port.

Thank you !

Post count: 74

But even in the (Cloud Templates -> Tagdiv Composer) the image doesn’t show up correctly. Then I try on multiple mobile devices, Google Pixel 2 and some Samsung device, same thing. The image does not show up properly.

When you refresh the page, while you are in the mobile viewport, the whole header gets refreshed and the logo image is no longer selected.

Post count: 35449

Hi kevinsikora,

When you set the SVG for mobile in tagDiv Composer is displaying correctly, please try like this -> https://i.imgur.com/YaP69GZ.png

Let us know the results!
Have a nice weekend!

Post count: 249

I’m having this issue also –

I just set a svg for the main menu and sticky.
Mobile menu and sticky –

And it’s not appearing on the mobile menu, however it does appear on the sticky mobile menu.

I’ve tried several sizes. I’ve also tried clearing the cache multiple times.

Post count: 249

I think it is fixed – seen an option next to svg options that showed -revert to desktop options – clicked that – and it appears that the logo now works.

However – is there a best image size to start with for the SVG Files?

Thanks

Post count: 35449

Hi Chris Baird,

Using tagDiv Composer to set on a cloud header a logo, you can set a logo text, an image text or a svg, now the size is no longer a problem, you can adjust it using the theme builder.
-> https://i.imgur.com/YeaFZ4n.png -> or https://i.imgur.com/YVXFKQI.png

Thank you!

Post count: 74

I still have an issue. I can set the (SVG width), but the image doesn’t get centered.

If I use the mobile theme, then the image gets displayed properly on a real mobile device. But, I don’t want to use the mobile theme.

Post count: 35449

Hi,

You can set the height too, you need to play a little with the settings until it will look perfect -> https://i.imgur.com/KfEBHRK.png

Thank you!

Post count: 74

I still have this issue.

When I refresh the home page on my mobile’s browser, the correct sized and correctly placed logo shows up for a second and then it’s replaced with another larger logo that is not placed or sized correctly.

Post count: 35449

Hi kevinsikora, please provide me some screenshots with the settings you’ve made on mobile device, in this way I will be able to identify the problem.
Thank you for your understanding!

Viewing 13 posts - 1 through 13 (of 13 total)
You must be logged in to reply to this topic.