Logo Not Scaling

[wfitg]

My logo is not scaling. It is not responsive to the screen size on hand held devices either. The rest of the page items are fine. See attachment.

 

Can anyone make suggestions on how to get it to scale with the rest of the items on the page? Or point me to the right files to edit or a howto?

 

thanks

[Michael]

app/views/client/bootstrap/strucutre.pdt

 

Look for <img src=" and add width="" height=""

[Tyson]

I think you want to add the class "img-responsive" to the image, and update the CSS for .logo to remove the float and width attributes.

[wfitg]

Did'nt work, but thanks.

However, adding this did, I used it as a workaround, for those people searching:

structure.pt

<a href="index.html">

<img src="https://wfitg.com/img/small-logo3.png" alt="logo" class="emailImage" />

</a>

the css:

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

{

.emailImage{

height:auto !important;

max-width:600px !important;

width: 100% !important;

}

}

[Tyson]

The logo changes I mentioned above work fine for me. Did you remember to update the .logo class?

[wfitg]

The logo changes I mentioned above work fine for me. Did you remember to update the .logo class?

No, but I am still learning. Some of this is new territory for me

[flangefrog]

This vQmod will make the logo responsive as long as you haven't already modified that part of the structure.pdt. You can look at the generated file in vqmod/vqcache to find out what the resulting structure.pdt looks like when the changes have been applied.

responsive_logo.xml

[wfitg]

I did modify it, but can restore it.

I recently asked for a Belesta developer licence so I can run a local copy. I plan to tinker around with it. Learn my way around and install NetBeans

Thanks for this great example

[Darin]

This vQmod will make the logo responsive as long as you haven't already modified that part of the structure.pdt. You can look at the generated file in vqmod/vqcache to find out what the resulting structure.pdt looks like when the changes have been applied.

 

I wasn't able to make this work without manually modifying the css file. This vQmod inserts the .img-responsive class in structure.pdt, but isn't overwriting the .logo class in styles.css.

 

According to About vQmod, "css & js files - These files are rendered at the browser level, not at the server level, so vQmod has no effect on these."

 

Is that the case here, or do I need to hunt down a gremlin? I guess it doesn't really matter, because I can just continue to use my manually modified css file. But I'm curious.

[Blesta Addons]

I wasn't able to make this work without manually modifying the css file. This vQmod inserts the .img-responsive class in structure.pdt, but isn't overwriting the .logo class in styles.css.

 

According to About vQmod, "css & js files - These files are rendered at the browser level, not at the server level, so vQmod has no effect on these."

 

Is that the case here, or do I need to hunt down a gremlin? I guess it doesn't really matter, because I can just continue to use my manually modified css file. But I'm curious.

you can use my plugin "css & javascript toolbox" to acheive this , add the css you want to the class you want .

[flangefrog]

I wasn't able to make this work without manually modifying the css file. This vQmod inserts the .img-responsive class in structure.pdt, but isn't overwriting the .logo class in styles.css.

 

According to About vQmod, "css & js files - These files are rendered at the browser level, not at the server level, so vQmod has no effect on these."

 

Is that the case here, or do I need to hunt down a gremlin? I guess it doesn't really matter, because I can just continue to use my manually modified css file. But I'm curious.

 

Yes, that's correct. not sure what I was thinking there. Try using a combination of vQmod for adding the img-responsive class and use the CSS & JavaScript toolbox for the CSS.

[Darin]

Will do. Thanks for confirming.

[turner2f]

@Tyson

Thanks for the tip.

For those of us that are " visual learners " here is a more clear explanation of what to do...

STEP 1 - Open up  app/views/client/bootstrap/strucutre.pdt

Look around LINES 204 - 212 you should find...
 

<div class="logo">
                    <a href="<?php echo $this->Html->safe($this->base_uri);?>">
                        <?php
                        if (!empty($theme_logo)) {
                        ?>
                        <img src="<?php $this->Html->_($theme_logo);?>" alt="Logo" />
                        <?php
                        } elseif (!empty($blesta_logo)) {
                        ?>

 

And change it to ...

<div class="logo">
                    <a href="<?php echo $this->Html->safe($this->base_uri);?>">
                        <?php
                        if (!empty($theme_logo)) {
                        ?>
                        <img class="img-responsive" src="<?php $this->Html->_($theme_logo);?>" alt="Logo" /><!-- added a class to make logo responsive. Comment out the the width for " .logo " in the styles.css file -->
                        <?php
                        } elseif (!empty($blesta_logo)) {
                        ?>

 

 

STEP 2 - Open up  app/views/client/bootstrap/css/styles.css

Look around LINES 58 - 63 you should find...

.logo {
    width: 123px;
    float: left;
    margin: 13px 0 3px 15px;
    display: inline;
}

 

And change it to ...

.logo {
    /* width: 123px; */  /* Commented this out to help make the logo responsive.  Also need to add class="img-responsive" around line 209 for the logo */
    float: left;
    margin: 13px 0 3px 15px;
    display: inline;
}

 

 

 

[turner2f]

...