Tag: responsive

The Problem

Build a two-column responsive page that had a fixed-width right column. It actually sounds easier than you think. That fixed-width right column throws a wrench into everything.

For this example, let’s go with a fluid left column and a 320px wide right column.

HTML

<div class="main">
<div class="leftwrapper">
<div class="left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo. Proin mollis facilisis sapien, id consequat purus imperdiet eu. Donec posuere, arcu a facilisis ultrices, nibh nisi convallis ante, et sollicitudin metus ante vel felis. Curabitur sagittis, dolor malesuada adipiscing pulvinar, velit risus elementum augue, non tempor lectus mi sit amet ipsum. Aliquam mollis semper ultrices. Sed eleifend tempus dui nec venenatis. Maecenas faucibus turpis leo, nec facilisis sapien mattis non. Donec in elit vitae enim interdum auctor nec id dui. Vivamus sed odio diam. Cras pretium dolor ac neque iaculis eleifend.

</div>
</div>
<div class="right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo.

</div>
</div>

Read more »

i guess it really shouldn’t be called “responsive” — it’s more “adaptive”. i mean, you can’t resize your browser or outlook window and expect it to update on the fly.

YkbaV

i’d like to say i’m pretty good at coding up html pages with css… and getting better and better at making sites responsive. well, only some of those skills are needed to code html emails

it’s a pain. a big one.

Read more »

finally took care of a nagging part of my site… the top slideshow. it wasn’t responsive before and now it is

it’s based off the responsive slider plugin. i had to make a minor change to it so it would show six slides per page load, choosing randomly from the library of slides. by default, it would show x amount of slides, where x is set in the settings > reading section (“Blog pages show at most”)

default

$slides = new WP_Query( array( 'post_type' => 'slides', 'order' => 'ASC', 'orderby' => 'menu_order' ) );

updated

$slides = new WP_Query( array( 'post_type' => 'slides', 'order' => 'ASC', 'orderby' => 'rand', 'posts_per_page' => 6 ) );

i actually didn’t expect the 'orderby' => 'rand' part to do what it did (choose randomly from the library of slides), but i’m pretty happy with it. this way, i can upload as many slides and not have to worry about ordering them in any special way

'posts_per_page' => 6 is what controls the amount of slides that are shown in the slideshow

yes, i’m aware that this will be killed if i update the plugin…