Linelabox Support

Hello there! Welcome to Linelabox Support Forum. Post your question and our support specialists will help you. Look for the solution in the F.A.Q. first. Our support team is available for any questions or issues in the following working hours: Monday - Friday: 10:00 - 18:00.

Help making images responsive Issue

I need help making images placed in articles or custom HTML modules to be responsive. If I place images in your flexslider module, they are responsive, but if I place an image in an article or in a non-linelabox module, I can't get it to be responsive. I am relatively new to CSS and HTML but I have been able to use

class=img-responsive

with other templates and it has worked fine. Please advise ASAP.
Responses (3)
  • Accepted Answer

    Tuesday, December 29 2015, 08:29 PM - #permalink
    0
    Hi Michael, sorry for the late reply due to holiday. Please provide website url. Thank you.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, December 30 2015, 05:11 PM - #permalink
    0
    No worries on the reply. Totally understand with the holidays.

    On the home page, I have a logo as a PNG inserted into a featured article. It is not behaving responsively. The HTML for the image from the article is:

    <p style="text-align: left;"><img src="/images/devXInfinity_FULL_no_perspective.jpg" alt="devX" width="468" height="249" class="img-responsive" style="margin-right: 10px; margin-bottom: 60px; float: left;" /></p>


    I have tried doing this with a smaller image that doesn't need resized with the following HTML and still have the same problem:

    <p style="text-align: left;"><img src="/images/devXInfinity_FULL_no_perspective.jpg" alt="devX" class="img-responsive" /></p>

    Does the class="img-responsive" not work within linelabox templates? As I mentioned before, I apologize if this is a rookie mistake. I'm a beginner with CSS and don't really understand how it works.

    References:

    1. http://www.devxpd.org
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, December 30 2015, 11:09 PM - #permalink
    0
    Please open article > Click "Toggle editor" this hides the editor and displays all text and HTML code.

    Find this code:

    <img class="img-responsive" width="468" height="249" style="margin-right: 10px; margin-bottom: 60px; float: left;" alt="devX" src="/images/devXInfinity_FULL_no_perspective.jpg">


    replace:

    <img style="margin-right: 10px; margin-bottom: 60px; float: left;" alt="devX" src="/images/devXInfinity_FULL_no_perspective.jpg">


    The "img-responsive" class is not defined in the css. You can add this rule to the style.css in the css folder of your template.
    The reply is currently minimized Show
Your Reply

VirtueMart Admin Theme

VMADMINLAB

Responsive VirtueMart 3 Administrator Template

Download
JOIN NOW!

New Joomla! 3 Template

REVOLAB

Responsive Joomla 3 Template / VirtueMart 3 Theme

Template Demo
JOIN NOW!

Recent Discussions

In all Download Folders from my Download Arrea are only the html and the images ...
3 days ago 4
Dobrý den, mám u Vás zakoupený proff. package, vytvořil jsem si šablonu, ale pok...
4 days ago 1
Hi I get the following warning on the product page when using the Simple File Up...
5 days ago 1
Password proctected content
2 weeks ago 2

Who's Online

We have 114 guests and 2 members online

Linelabox.com is not affiliated with or endorsed by Open Source Matters or the Joomla Project. Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
Copyright © 2014 Linelabox.com - Joomla! 3 / VirtueMart 3 Templates. All Rights Reserved.
Joomla! is Free Software released under the GNU General Public License. All other marks are the property of their respective owners.
LINELAB WEBDESIGN