11
Hadesteam
Re: Automatic image width (for mobile devices)
  • 2017/4/25 16:10

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


Thanks for the help, I added a class to all the pictures in the articles. Checking if everything works is wrong with displaying the same images, I noticed this before when I moved the content of the icontent module to the news. Well, the pictures are separated by a space and before the theme change, they are displayed side by side and now one under another.

For example:
http://www.kulturystyka.org.pl/modules/icontent/index.php?page=41
http://www.kulturystyka.org.pl/modules/news/article.php?storyid=436

Is any method in css to repair ? Regards

12
aerograf
Re: Automatic image width (for mobile devices)
  • 2017/4/25 17:07

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


Images in a div block?
At myself I have made so:
img.big {cursorse-resizemax-width150pxpadding5px;}
img.big:hover {max-widthnonepadding5px;}

13
Hadesteam
Re: Automatic image width (for mobile devices)
  • 2017/4/25 18:01

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


I have no idea, before adding this
class = "img-responsive"
error has already occurred, should display 3 thumbnail images side by side, line break and again 3.

When i edit article is something like this:
Resized Image

But when i save this i so effects.

14
aerograf
Re: Automatic image width (for mobile devices)
  • 2017/4/25 18:27

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


Try to put spaces instead of spaces:
 

Without spaces!
But I would like to see the code ....

15
Hadesteam
Re: Automatic image width (for mobile devices)
  • 2017/4/25 19:16

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


Code of article or my theme?

article html code:
<a href="http://www.kulturystyka.org.pl/fotki/hubert/01.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/01m.jpg" /></a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/02.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/02m.jpg" /></a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/03.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/03m.jpg" /></a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/04.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/04m.jpg" /></a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/05.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/05m.jpg" /></a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/06.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/06m.jpg" /></a>

16
Hadesteam
Re: Automatic image width (for mobile devices)
  • 2017/4/25 21:30

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


When i use
[img] [/img]
then is ok, but is to many pictures to change, Is there no other solution? On old template worked maybe send old css?

17
aerograf
Re: Automatic image width (for mobile devices)
  • 2017/4/26 5:59

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


border = "0" does not need to be specified, because In css should be img {border: 0;}. And try without spaces. And in css that is written for a {} and for img {}?

18
aerograf
Re: Automatic image width (for mobile devices)
  • 2017/4/26 6:01

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


And more ... What kind of editor do you use? If fckeditor try to replace it. It needs to be updated, in new templates it adds different codes ...

19
Bleekk
Re: Automatic image width (for mobile devices)
  • 2017/4/26 6:46

  • Bleekk

  • Theme Designer

  • Posts: 940

  • Since: 2002/12/14


This is how we add the class in images automatic on xoops.org
<script>
            $( 
document ).ready(function() {
                $(
"img").addClass("img-responsive");
                $( 
"form img" ).removeClass"img-responsive" );
                $(
".xoops-comment-text").each(function() {
                  $(
this).find("img").css"display""inline" );
                });
                $(
".page_bookmarks").each(function() {
                  $(
this).find("img").css"display""inline" );
                });
                $(
".page_icons").each(function() {
                  $(
this).find("img").css"display""inline" );
                });
            });
        </
script>

20
aerograf
Re: Automatic image width (for mobile devices)
  • 2017/4/26 7:08

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


It seems img-responsive causes conflict. I do not use this template myself, but when using this script I need to clear all the img references from the css files. Or reset css when loading the template. Another problem can be in the description of the div.
Also, I did not pontravilos, when viewing through the browser the source code of the page, the use of capital letters in the indication of tags.

Login

Who's Online

237 user(s) are online (165 user(s) are browsing Support Forums)


Members: 0


Guests: 237


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits