Retina screens

[rpinto]

Hello everyone,

 

I inserted a logo on a prestashop site, and it looks very well on my bigger screen, but it's blurry on my smaller screen (which is a retina screen).

I can't replace my png image for an svg, because it's no accepted.

I tried to export my image with 300dpi, but it gets to big when i insert it on the website.

Already looked for a module to help me out with is, without having to make changes in the code, but I am not finding any solution.

 

Does anyone has a solution for this?

Thank you!

[RhinoRudi]

I just put an SVG logo up. 

Put your SVG in the main IMG folder or where you want - FTP works best here.

Then open header.tpl in your theme folder themes/your-theme/templates/_partials/header.tpl

Add a special class to your img class, like in the code below, so you can target that in themes/your-theme/assets/CSS/custom.css

<div class="col-md-4  hidden-sm-down" id="_desktop_logo">
                   <h1 class="header-logo">
                        <a href="{$urls.base_url}">
                            <img class="logo special-main-logo" src="https://yourDomainName.com/img/imageName.svg" alt="{$shop.name}">
                            <span style="display: none;">{$shop.name}</span>
                        </a>
                    </h1>
                </div>

add to custom.css something like this, just adjust width and leave height to auto.  You may have to adjust this in different @media-queries for different screen sizes.

.special-main-logo {
    width: 200px;
    height: auto;
}

IHTH «Randy