Joomla Templates Club 406,261 posts

[espresso Friend espressoJoin date: May 2013Posts: 22Downloads:0Uploads:3 Thanked: 3 times in 1 posts]

#189229

I’m trying to add two divs that are side by side with one that contains an image or youtube/vimeo video and the other text

How do I go about making these divs responsive and having the image/video responsive also?

Is there already CSS classes within template.css that I can recycle?

[espresso Friend espressoJoin date: May 2013Posts: 22Downloads:0Uploads:3 Thanked: 3 times in 1 posts]

#500163

This is what I have tried

template.css

div.courseinfo-columns{display: inline-block; margin: 0 auto; position: relative;}
div.course-img{ position: relative; float: left; margin: 0 auto; vertical-align: center; display: inline-block; text-align: center; width: 48%;}
div.course-text{ position: relative; float: left; display: inline-block; text-align: left; vertical-align: top; width: 48%; }

h3.course-subtitles { font-family: 'NovecentowideNormalRegular'; font-size: 110%; font-weight: bold; }


layout-mobile-port.css

div.course-img{ float: none; margin: 0 auto; vertical-align: center; text-align: center; width: auto; }
div.course-text{ float: none; text-align: left; vertical-align: top; width: auto;}


HTML
<div class=”courseinfo-columns”>
<div class=”course-img”>
<img title=”Example of a rosetta – a pattern which you will learn in the class” src=”images/latte-art-rosetta.jpg” alt=”Barista Training Courses – Latte Art” />
</div>

<div class=”course-text”>
<h3 class=”course-subtitles”><span>Who should enrol?</span></h3>
<ul class=”ja-typo-list list-star”>
<li><span class=”icon”> </span>If you would like to learn how to free pour and etch art on your coffees</li>
<li><span class=”icon”> </span>Home baristas and coffee enthusiasts who have a firm grasp of espresso making basics</li>
<li><span class=”icon”> </span>People looking to find a job as a barista</li>
</ul>
</div>

</div>

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#500387

Hi

You can try to use media jquery to specify resolution of these divs for appropriate devices. Here are some references you can take a look:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://code-tricks.com/css-media-queries-for-common-devices/

Hope it helps.

[espresso Friend espressoJoin date: May 2013Posts: 22Downloads:0Uploads:3 Thanked: 3 times in 1 posts]

#500848

My problem was that I wasn’t using
!important
to override the existing rules in template.css in layout-mobile-port.css

Firebug and Chrome Developer tools is amazing for debugging code!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#501015

Yaa, they are so great 😀

[Author]

Posts