wfitg Posted September 4, 2014 Report Share Posted September 4, 2014 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 Quote Link to comment Share on other sites More sharing options...
0 Michael Posted September 4, 2014 Report Share Posted September 4, 2014 app/views/client/bootstrap/strucutre.pdt Look for <img src=" and add width="" height="" Quote Link to comment Share on other sites More sharing options...
0 Tyson Posted September 4, 2014 Report Share Posted September 4, 2014 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. Michael 1 Quote Link to comment Share on other sites More sharing options...
0 wfitg Posted September 8, 2014 Author Report Share Posted September 8, 2014 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; } } Michael 1 Quote Link to comment Share on other sites More sharing options...
0 Tyson Posted September 8, 2014 Report Share Posted September 8, 2014 The logo changes I mentioned above work fine for me. Did you remember to update the .logo class? wfitg 1 Quote Link to comment Share on other sites More sharing options...
0 wfitg Posted September 9, 2014 Author Report Share Posted September 9, 2014 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 Quote Link to comment Share on other sites More sharing options...
0 flangefrog Posted September 9, 2014 Report Share Posted September 9, 2014 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 1 Quote Link to comment Share on other sites More sharing options...
0 wfitg Posted September 9, 2014 Author Report Share Posted September 9, 2014 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 Quote Link to comment Share on other sites More sharing options...
0 Darin Posted October 8, 2014 Report Share Posted October 8, 2014 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. Quote Link to comment Share on other sites More sharing options...
0 Blesta Addons Posted October 8, 2014 Report Share Posted October 8, 2014 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 . Quote Link to comment Share on other sites More sharing options...
0 flangefrog Posted October 9, 2014 Report Share Posted October 9, 2014 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. Quote Link to comment Share on other sites More sharing options...
0 Darin Posted October 9, 2014 Report Share Posted October 9, 2014 Will do. Thanks for confirming. Quote Link to comment Share on other sites More sharing options...
0 turner2f Posted December 4, 2016 Report Share Posted December 4, 2016 @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; } Quote Link to comment Share on other sites More sharing options...
0 turner2f Posted December 4, 2016 Report Share Posted December 4, 2016 ... Quote Link to comment Share on other sites More sharing options...
Question
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
Link to comment
Share on other sites
13 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.