Autor Zpráva
maestorm
Profil
Hezké ráno,
potřeboval bych poradit jak v tomto případě vytvořit responzivní dvousloupcový layout. Přikládám kód jak v HTML5 tak v CSS.

{block #title}{$page->title} - {include parent}{/block}
{block #keywords}{$page->keywords}{if !strlen($page->keywords)}{include parent}{/if}{/block}
{block #description}{$page->description}{if !strlen($page->description)}{include parent}{/if}{/block}

{block content}
<div class="news_post_class">
    <div class="post-info">
        <h1 class="post-title">{$page->title}</h1>
        <div n:foreach="$items as $row" class="clearfix">
            <h2>
                <a n:href="$row->link $row->id">{$row->title}</a>
            </h2>
            <div class="news_threesome_img">
                <a n:href="$row->link $row->id">
                    <img n:src="$row->image, 200, 150, crop" alt="{$row->title}" title="{$row->title}">
                </a>     
            </div>
            <div class="news_threesome_p">
                {$row->perex|noescape}
            </div>             

        </div>
    </div>
</div>

{control p}

/* styles for single post */

.news_post_class {
    margin: 0 auto;
    margin-bottom: 3em;
    width: 60%;
}

@media all and (max-width : 768px) {
    .news_threesome_img { margin-right: 19.5em; float: left; width: 150px;}
    .news_threesome_p  { position: relative; width: 10em; float: left;}   
}

@media all and (max-width : 330px) {
    .news_threesome_img { margin-right: 19.5em; float: left;}
    .news_threesome_p  { position: relative; width: 18.75em; float: left;}   
}

Velice by mi to pomohlo. Děkuji.
Kcko
Profil
maestorm:
Proč sem dáváš šablonu z Nette? Hod sem odkaž na živou ukázku ...

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0