html - Image overlap on css responsive page -

-

this first try @ responsive design , can't quite right. seen in first screenshot tower image overlaps div , i'm not sure i've done wrong. image here: http://postimg.org/image/l9ax77rhz/

the width of container 1170px , wanted trigger scaling of images , text once screen size dropped below point. image here: http://postimg.org/image/n420djzlj/ dropping below 760 sections begin overlap. want fix overlap , have images display first on small screens title , text below.

can explain me how or i've done wrong? html , css below

<style>   .lenovo-container {         width: 1170px;         height: 381px;         min-width: 858px;     }    .lenovo-container img {         float: left;         }    @media (max-width:1170px) {         img {              max-width: 100%;             height: auto;          }         .lenovo-container {             max-width: 100%    @media (max-width: 858) {         .lenovo-container p {             display: block;          }   } </style> <div class="lenovo-container">     <img class=" wp-image-1498 size-full alignnone" src="wp-content/uploads/2015/06/rack-server-e1434645252235.jpg" alt="rack server" width="500" height="381" />     <h2>rack servers</h2>     <p>lenovo thinkservers , system x rack servers ideal small medium-sized business , feature power-efficient designs, segmented workloads, , fit-for-purpose applications.</p>     <div class="product-button" style="vertical-align: bottom;">         <div class="button-inner-product"><a href="http://shop.lenovo.com/us/en/systems/servers/racks/" target="_blank">learn more</a>         </div>     </div>  </div> <br> <div class="aligncenter" style="width: 1170px; display: block; vertical-align: bottom">     <hr />     </div>  <div class="lenovo-container"> <img class="alignnone size-full wp-image-1565" src="wp-content/uploads/2015/06/lenovo-server-e1434648963684.jpg" alt="lenovo server" width="500" height="520" /> <h2>tower servers</h2> <p>lenovo tower servers provide performance, reliability, , easy-to-use tools manage file/print , point-of-sale workloads.</p> </div>

the culprit float:left. try instead:

.lenovo-container {     width: 1170px;     height: 381px; /* if image getting cut off, it's large.                         try auto instead or remove property altogether. */     min-width: 858px;     overflow: hidden; }  .lenovo-container img {     float: left; }

floats break element out of document flow, , float them left of elements. fix forces container respect bounds of float.

a cleaner fix is:

.lenovo-container:after {   display: table;   content: '';   clear: both; }

if want image resize container, try this:

 @media (max-width:1170px) {     .lenovo-container img {       max-height: 100%;     }     .lenovo-container {         max-width: 100%     }  }

Comments

Post a Comment

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null
Read more

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops',
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens
Read more