simplex template low resolution visualization

[giapippo]

hello to all
I wish arises to change the simplex template to make it viewable, even in low-resolution screens, the part in the blue square in the head.

resize images but the square disappears how can I do?

the site is http://www.overgroup.eu/corsi_ecm/

thank you very much

[giapippo]

this is the template head part


</head>

</__body id='boxed'>
<!-- #wrapper (wrapping content in a box) -->
<div class='container centered' id='wrapper'>
<!-- accessibility links, jump to nav or content -->
<ul class="visuallyhidden">
<li>{anchor anchor='nav' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
<!-- accessibility //-->
<!-- .top (top section of page containing logo, navigation search...) -->
<header class='top'>
<div class='row header'>
<!-- .logo (cmsms logo on the left side) -->
<div class='logo grid_4'>
<a href='http://www.overgroup.eu' title='{sitename}'>
<img src='{uploads_url}/images/logo_over_group.png' width='227' height='59' alt='{sitename}' />
{*<span class='palm'></span>*}
</a>
</div>
<!-- .logo //-->
<!-- .main-navigation (main navigation on the right side) -->
<nav class='main-navigation grid_8 noprint' id='nav' role='navigation'>
{menu template='Simplex_Navigation.tpl'}
</nav>
<!-- .main-navigation //-->
</div>
<!-- .header-bottom (bottom part of header containing catchphrase and search field) -->
<div class='row header-bottom'>
<section class='phrase'>
<span class='grid_7'>PROVIDER ECM . CONSULENZA SCIENTIFICA . SERVIZI CONGRESSUALI . COMUNICAZIONE . EVENTI</span>
{strip}
{search assign='is_search'}{* assigned search module tag, now we can build different search template for this site template and have fun with html5, Read http://www.w3.org/TR/html-markup/input.search.html for full attirbute specs *}
{if isset($is_search)}
<div class='grid_5 search noprint' role='search'>
{$startform}
<label for='{$search_actionid}searchinput' class='visuallyhidden'>{$searchprompt}:</label>
<input type='search' class='search-input' id='{$search_actionid}searchinput' name='{$search_actionid}searchinput' size='20' maxlength='50' value='' placeholder='{$searchtext}' />
{if isset($hidden)}{$hidden}{/if}
{$endform}
</div>
{/if}{/strip}
</section>
</div>
<div class='clear'></div>
<!-- .header-bottom //-->
<!-- .banner (banner area for a slider or teaser image) -->
<section class='banner row noprint' role='banner'>
<div class='banner-text'>
<ul>
<style type="text/css">
.style6 {
color: #FFFFFF;
font-family: Verdana;
font-size: 10pt;
}
</style>

<p class="style6"> Il Gruppo Over opera nel campo della formazione scientifica realizzando progetti educazionali finalizzati alla crescita del professionista in campo sanitario.<br>
<br>
<strong>I numeri di Over:</strong> <br>

- 3540 corsi di formazione effettuati con piu' di 90.000 medici coinvolti<br>
- 103 eventi internazionali e 2870 eventi in Italia accreditati ECM<br>
- 9780 utenti coinvolti nella FAD<br>
<br>
Over ha ottenuto la certificazione ISO 9001:2008 <BR>n° QAIC/IT/91733-A.

</p>

</ul>
</div>
<div class='banner-image cf'>
{strip}
{* you do not need a module for every simple site functionality. For example you can build a simple slideshow
with php glob function (http://www.php.net/manual/en/function.glob.php) without wasting your system resources
by using modules or plugins.
Below would search for files matching .jpg in folder named teaser in simplex theme folder *}
{assign var='teaser' value='uploads/simplex/teaser/*.jpg'|glob}
{capture}{$teaser|@shuffle}{/capture}
{foreach from=$teaser item='one'}
<div><img src='{root_url}/{$one}' width='852' height='200' alt='' /></div>
{/foreach}
{/strip}
</div>
</section>
<!-- .banner //-->
</header>

[Dr.CSS]

You are going to have to explain a bit more what you mean by low res. screen, that template is set up to be usable on screens as small as phones, I don't see any blue square...

[giapippo]

thanks

in the full resolution the blue square are visualized

www.overgroup.eu/full.jpg

in low resolution no

www.overgroup.eu/low.jpg


thanks for your help

[zaidcrowe]

have you got a link to this online? i dont have a fresh cmsms handy to look at, but it should be simple!

[Dr.CSS]

Most likely there is some @media call telling it to go away at specific width, this is why I make all my @media calls myself when doing responsive designs...

[giapippo]

thanks for help



this is the style

@media only screen and (min-width: 300px) and (max-width: 1024px) {
#three-columnsh .col {
float: left;
width: 100%; [[* era 220px *]]
margin-right: 5px;





and this is the style core


/* =====================================
Tablet (Portrait)
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
.container {
width: 92%;
min-width: 768px;
max-width: 1024px
}
}

/* =====================================
Smartphones (Portait)
===================================== */
@media only screen and (max-width: 320px) {
.container {
width: 92%;
min-width: 300px;
max-width: 320px
}
.container .grid_1,
.container .grid_2,
.container .grid_3,
.container .grid_4,
.container .grid_5,
.container .grid_6,
.container .grid_7,
.container .grid_8,
.container .grid_9,
.container .grid_10,
.container .grid_11,
.container .grid_12 {
width: 98%;
margin: 0 1%;
float: none
}
}

/* =====================================
Smartphones (Landscape)
===================================== */
@media only screen and (min-width: 321px) and (max-width: 767px) {
.container {
width: 92%;
min-width: 321px;
max-width: 767px
}
.container .grid_1,
.container .grid_2,
.container .grid_3,
.container .grid_4,
.container .grid_5,
.container .grid_6,
.container .grid_7,
.container .grid_8,
.container .grid_9,
.container .grid_10,
.container .grid_11,
.container .grid_12 {
width: 98%;
margin: 0 1%;
display: block;
float: none
}
}

/* =====================================
Smartphones (Portrait & Landscape)
===================================== */
@media only screen and (min-width: 300px) and (max-width: 767px) {
.container .prefix_1,
.container .prefix_2,
.container .prefix_3,
.container .prefix_4,
.container .prefix_5,
.container .prefix_6,
.container .prefix_7,
.container .prefix_8,
.container .prefix_9,
.container .prefix_10,
.container .prefix_11,
.container .suffix_1,
.container .suffix_2,
.container .suffix_3,
.container .suffix_4,
.container .suffix_5,
.container .suffix_6,
.container .suffix_7,
.container .suffix_8,
.container .suffix_9,
.container .suffix_10,
.container .suffix_11 {
padding-right: 0;
padding-left: 0
}
.container .push_1,
.container .push_2,
.container .push_3,
.container .push_4,
.container .push_5,
.container .push_6,
.container .push_7,
.container .push_8,
.container .push_9,
.container .push_10,
.container .push_11,
.container .pull_1,
.container .pull_2,
.container .pull_3,
.container .pull_4,
.container .pull_5,
.container .pull_6,
.container .pull_7,
.container .pull_8,
.container .pull_9,
.container .pull_10,
.container .pull_11 {
left: auto;
right: auto
}
}

/* =====================================
iPhone 4, iPad2, Retina stuff ?
===================================== */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

/* if you buy me one i might test and add something here */

}

/* =====================================
CLEARING FLOATS
===================================== */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0
}

.cf:before,
.cf:after,
.row:before,
.row:after{
content: "";
display: table
}
.cf:after,
.row:after{
clear: both
}
.cf,
.row {
*zoom: 1
}

[[/strip]]

[Dr.CSS]

I would use Firefox with Web Developer toolbar and set the Edit Css pane on the left then you can move it left to shrink view-port and watch it change, when it gets to the point it loses the blue box do the changes need in the CSS when it works copy it into the actual style sheet...

I never use frame works like bootstrap as I think they add way to much stuff that's not needed...

http://adjusterstories.com/

This is not how I would make it look but the site owner wanted it this way, I had too much trouble trying to get the simplex theme to do what they wanted so I just rolled my own...