1
Hadesteam
Automatic image width (for mobile devices)
  • 2017/4/24 15:22

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


I have quite wide advertising banners on www.kulturystyka.org.pl. When I go on the phone, they do not automatically adjust to the width of the screen .... How to change it?

What is the best practice for everyone, no matter what device they use, have pictures displayed in the correct form?
I tried to add to the <img src = "tag width =" 100% but it only worked for the banner under the article (news module) but in the block at the top of the banner instead of expanding it decreased ...

Please help how to systematically solve it?
Regards

2
Bleekk
Re: Automatic image width (for mobile devices)
  • 2017/4/24 16:12

  • Bleekk

  • Theme Designer

  • Posts: 940

  • Since: 2002/12/14


<img src="..." class="img-responsive">

3
Hadesteam
Re: Automatic image width (for mobile devices)
  • 2017/4/24 16:22

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


.width100 width:             100%;}


<a href="http://www.sfd.pl/sklep/prdir.aspx?pid=20" target="_blank"><img class="width100" src="http://www.kulturystyka.org.pl/images/baner_sfd_650.gif"> </a>


Look at this and first baner top left why is smaller than before but banner under article is resizing 100% ?
http://www.kulturystyka.org.pl/modules/news/article.php?storyid=1122

4
Bleekk
Re: Automatic image width (for mobile devices)
  • 2017/4/24 19:09

  • Bleekk

  • Theme Designer

  • Posts: 940

  • Since: 2002/12/14


first your fb comments are not responsive
and second please use the bootstrap class img-responsive for all images on your website

5
Hadesteam
Re: Automatic image width (for mobile devices)
  • 2017/4/24 20:32

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


Ok thank you for the information, and could you give an example? How do you explain to me I will know how to change all the pictures on the site ... I see something like this:

.widthauto width:            auto;}
.
width100 width:             100%;}
.
width90 width:             90%}
.
width80 width:             80%;}
.
width75 width:             75%;}
.
width70 width:            70%}
.
width66 width:            66.6%}
.
width60 width:            60%}
.
width50 width:             49%;}
.
width45 width:            45%}
.
width40 width:            40%}
.
width33 width:             33.3%;}
.
width30 width:             30%;}
.
width25 width:             25%;}
.
width20 width:             20%;}
.
width15 width:             15%;}
.
width10 width:             10%;}
.
width5width:                5%; }
.
width3width:                3%; }
.
width2width:                2%; }
.
width1width:                1%; }


Can you change the code below, but these 2 banners were fully responsive on all devices? (I'll just change the responsiveness of FB comments). If i find where it changes ... Please advice.

<center>
<
a href="http://www.sfd.pl/sklep/prdir.aspx?pid=20"><img class="width100" src="/reklama/baner_poziomy_dol_sfd.jpg"></a>

<
a href="http://www.taniesuple.com/" target="_blank"><img src="http://www.kulturystyka.org.pl/reklama/TanieSuple_com_730x100_.jpg"></a></center>

6
Bleekk
Re: Automatic image width (for mobile devices)
  • 2017/4/24 20:50

  • Bleekk

  • Theme Designer

  • Posts: 940

  • Since: 2002/12/14


i explained it in my first answer. post #2

7
Hadesteam
Re: Automatic image width (for mobile devices)
  • 2017/4/24 20:58

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


I am a heavy case .... hehe;)

widthauto
i try and tell You if something change for better

8
Zap_English
Re: Automatic image width (for mobile devices)

Quote:

Bleekk wrote:
<img src="..." class="img-responsive">


So you put class="img-responsive" in every image link?

9
aerograf
Re: Automatic image width (for mobile devices)
  • 2017/4/25 6:47

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


As far as I remember, resizing depending on the screen: max-width: 100%;

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

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


That's right ... lol, then I may not be writing anything yet ....


... stupid hades, stupid hades ...

Login

Who's Online

231 user(s) are online (140 user(s) are browsing Support Forums)


Members: 0


Guests: 231


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