responsive images/tables

Responsive community-minded music Joomla template with JomSocial extension support.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Tue Dec 24, 2013 9:53 pm
Reply with quote
Report this post
Hi,
First of all sorry it it's off-topic but I thought it's worthy to ask for advice authors of the template.

I need to have responsive set of photos on this site: //tab "FRAGMENTY SCENARIUSZA" http://swiatloczula.nazwa.pl/new/index.php/filmy/imagine

I've tried putting them inside the table but it only keeps order of the photos but I don't know how to make it entire as responsive.
I need just simple stretch like on the second picture from this tutorial: http://css-tricks.com/responsive-data-tables/

Is there a simple html code for it or will I have to ass something to CSS of the template?
User avatar
Senior Boarder

GK User
Thu Dec 26, 2013 10:24 am
Reply with quote
Report this post
Do you need to put those images inside tables, or can you put them simply inline?
User avatar
Moderator

GK User
Fri Dec 27, 2013 10:50 am
Reply with quote
Report this post
It's only about images so I don't need them inside the table. I just want to stretch it proportionally on mobile/tablets/smaller window.
User avatar
Senior Boarder

GK User
Fri Dec 27, 2013 12:37 pm
Reply with quote
Report this post
Could You please post an url to your site?
User avatar
Moderator

GK User
Fri Dec 27, 2013 1:13 pm
Reply with quote
Report this post
of course here it is: http://swiatloczula.nazwa.pl/new/index.php/filmy/imagine
The part I need to make responsive is in "FRAGMENTY SCENARIUSZA" tab from page breaks.
User avatar
Senior Boarder

GK User
Fri Dec 27, 2013 1:21 pm
Reply with quote
Report this post
Right now you have small images there placed inside tables.
1. Please create a simple mockup of how it should look and post it here
2. Please remove tables and post big images inside "Fragmenty Scenariusza" tab.
User avatar
Moderator

GK User
Fri Dec 27, 2013 1:43 pm
Reply with quote
Report this post
I removed the tables no now there are only images.
I didn't put bigger size as I need this images more like an icon for the link under it so I'm only interested in making them smaller when the window gets smaller.
User avatar
Senior Boarder

GK User
Fri Dec 27, 2013 2:33 pm
Reply with quote
Report this post
Its not an easy task and will require some tweaking, if you will decide to use it somwhere else.

1. Make sure html code looks this way (please disable tinyMCE switching it to Editor - none for this):
Code: Select all
<p style="
    /* max-width: 100%; */
" class="floated"><a class="jcepopup noicon first" href="http://swiatloczula.nazwa.pl/new/images/Filmy/Imagine/fragmenty-scenariusza/Imagine_scena18-19.pdf" target="_blank" type="iframe" style="
    /* float: left; */
    /* display: block; */
    /* width: 48%; */
"><img alt="teczki-scenariusz-imagine18-19" src="/new/images/Filmy/Imagine/fragmenty-scenariusza/teczki-scenariusz-imagine18-19.png" height="auto"></a> <a class="jcepopup noicon second" href="http://www.youtube.com/watch?v=plb30H8gtjk" target="_blank" type="video/youtube" style="
    /* float: left; */
    /* display: block; */
    /* width: 50%; */
"><img onmouseover="this.src='/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19roll.jpg';" onmouseout="this.src='/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19.jpg';" alt="scena18-19" src="/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19.jpg" height="auto"> </a></p>


To make it short - add class 'floated' to p element and add class first to first anchor, and class second to second anchor.

Now place this code in override.css:
Code: Select all
p.floated {overflow: hidden;}
p.floated a.first, p.floated a.second {
float: left;
display: block;
width: 49%;}
p.floated a.first {
max-width: 173px;
}


What it does - it clears float for p element (so next elements doesn't float with previous), then creates simple declarations with width of a elements and max width for the first one so there will be no additional spacing. You can increase the number to create some spacing between images.
User avatar
Moderator

GK User
Fri Dec 27, 2013 2:45 pm
Reply with quote
Report this post
Wow! thank you! I will definitely use it more then once so it's a really helpful answer.

Will it conflict with any editor? I'm using JCE
User avatar
Senior Boarder

GK User
Fri Dec 27, 2013 2:47 pm
Reply with quote
Report this post
It should not - tinyMCE should not strip element classes, but if it will, you will know what to do. The most important thing is the overlapping element (here the paragraph) that has to have default width set to 100% (paragraphs and divs acts like this).
User avatar
Moderator

GK User
Mon Dec 30, 2013 12:06 pm
Reply with quote
Report this post
It all works fine! Thanks
I just don't know now how to put text on the same line as images in the middle hight of the image.
I've tried putting it inside of the tag of images but its didn't work out. Text="Scena 18-19"
Code: Select all
<p class="floated" style="/* max-width: 100%;">Scena 18-19<span style="font-size: 18pt;"></span><a class="jcepopup noicon first" style="/* float: left; */
        /* display: block; */
        /* width: 48%;" href="images/Filmy/Imagine/fragmenty-scenariusza/Imagine_scena18-19.pdf" target="_blank" type="iframe"><img style="float: right;" alt="teczki-scenariusz-imagine18-19" src="/new/images/Filmy/Imagine/fragmenty-scenariusza/teczki-scenariusz-imagine18-19.png" height="auto" /></a><a class="jcepopup noicon second" style="/* float: left; */
        /* display: block; */
        /* width: 50%;" href="http://www.youtube.com/watch?v=plb30H8gtjk" target="_blank" type="video/youtube"><img style="float: right;" onmouseover="this.src='/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19roll.jpg';" onmouseout="this.src='/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19.jpg';" alt="scena18-19" src="/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19.jpg" height="auto" /> </a>
   </p>
User avatar
Senior Boarder

GK User
Thu Jan 02, 2014 6:18 pm
Reply with quote
Report this post
Could you please remove any additional commented out inline css'es from the code and then write back?
User avatar
Moderator

GK User
Fri Jan 03, 2014 1:58 pm
Reply with quote
Report this post
Sorry for that. It's clear now also without set alignments:
Code: Select all
<p class="floated" style="max-width: 100%;">Scena 18-19<a class="jcepopup noicon first" style="float: left; display: block; width: 48%;" href="images/Filmy/Imagine/fragmenty-scenariusza/Imagine_scena18-19.pdf" target="_blank" type="iframe"><img alt="teczki-scenariusz-imagine18-19" src="/new/images/Filmy/Imagine/fragmenty-scenariusza/teczki-scenariusz-imagine18-19.png" height="auto" /></a><a class="jcepopup noicon second" style="float: left; display: block; width: 50%;" href="http://www.youtube.com/watch?v=plb30H8gtjk" target="_blank" type="video/youtube"><img onmouseover="this.src='/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19roll.jpg';" onmouseout="this.src='/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19.jpg';" alt="scena18-19" src="/new/images/Filmy/Imagine/fragmenty-scenariusza/scena18-19.jpg" height="auto" /> </a>
   </p>
User avatar
Senior Boarder

GK User
Tue Jan 07, 2014 7:28 pm
Reply with quote
Report this post
I've been trying to make it as good as it is possible - but sadly there is no way to do it right without many changes.
First of all - you can read about vertical align here:
http://www.vanseodesign.com/css/vertical-centering/
But none of this methods works with responsive design.
So my ide would be to:
1. Put text into <span> element and place it at end of the line, so the html looks this way:
<a href="...">...</a><a href="...">...</a><span>text</span>
2. Correct css so elements floats well
3. Use:
Code: Select all
p.floated span {
line-height: 260px;
}

to center text vertically.
This will work for full width fine, but if you reduce size you would need to create separated media queries in override.css to "create" layout for lower screen widths:
Code: Select all
@media (max-width: 580px) {
#element {properitie: value;}
}
}

With different max-widths you can create different styling for the elements, but I'm afraid thats all I can help you with.
User avatar
Moderator


cron