html - Stack divs ontop of each other -

-

i have 3 column set of divs styled table.

i'd these 3 columns stack vertically on mobile device.

i believe maybe possible using float method, titles , description each column appear in seperate rows (divs) i'm not sure how make happen?

intension

http://content.screencast.com/users/workbookssam/folders/jing/media/cf93215d-90b0-4286-9636-c6b924250358/2016-08-08_1242.png

fiddle https://jsfiddle.net/8tv35jll/

html

<p><img alt="service-desk-team-heads-mini-min.png" height="212" src="/sites/default/files/pictures/service-desk-team-heads-mini-min.png" title="the 2016 workbooks support team" width="878" /></p>  <h4 style="text-align: left;">please use search tool above,&nbsp;the left-side menu or links below browse through our knowledge base.</h4>  <div class="rtable"> <div class="rtablebody"> <div class="rtablerow"> <div class="rtablecell"> <h4>new workbooks?</h4> </div>  <div class="rtablecell"> <h4>training videos</h4> </div>  <div class="rtablecell"> <h4>system admin</h4> </div> </div>  <div class="rtablerow"> <div class="rtablecell" style="border-right: 1px dashed grey;">using workbooks first time?</div>  <div class="rtablecell" style="border-right: 1px dashed grey;">watch our short training videos find out how use workbooks:</div>  <div class="rtablecell">system administrator? familiarise following:</div> </div>  <div class="rtablerow"> <div class="rtablecell" style="border-right: 1px dashed grey;"> <ul>     <li class="nowrap"><a href="/help/introduction">introduction workbooks</a></li>     <li><a href="/help/navigation_and_editing">workbooks desktop</a></li>     <li><a href="/help/importing">importing data</a></li> </ul> </div>  <div class="rtablecell" style="border-right: 1px dashed grey;"> <ul>     <li class="nowrap"><a href="/help/training/videos#getting_started_with_workbooks_video">getting started workbooks</a></li>     <li class="nowrap"><a href="/help/training/videos#introduction_to_workbooks_outlook_connector_video">workbooks outlook connector</a></li>     <li class="nowrap"><a href="/help/importing">introduction reporting</a></li> </ul> </div>  <div class="rtablecell"> <ul>     <li><a href="/help/users/setting_up">create new users</a></li>     <li class="nowrap"><a href="/help/own_organisation">configure organisation</a></li>     <li class="nowrap"><a href="/help/customising">add custom fields</a></li> </ul> </div> </div> </div> </div>

css

.rtable { display: table; width: 100%;  }   .content-section h4 { text-align: center; font-weight: 400; margin: 0 0 0 0; }  .content-section img { margin-bottom: 0; }  li.nowrap { white-space: nowrap; }   .rtablerow { display: table-row; }  .rtableheading { display: table-header-group; background-color: #ddd; }   .rtablecell, .rtablehead { display: table-cell; padding: 3px 10px; }   .rtableheading { display: table-header-group; background-color: #ddd; font-weight: bold; }   .rtablefoot { display: table-footer-group; font-weight: bold; background-color: #ddd; }   .rtablebody { display: table-row-group; }

see fiddle

had set explicit width's cells, sized appropriately. can remove rows , make necessary changes have same style.
used

width: 250px

Comments

Post a Comment

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

-
i trying work entity inside request method of spring boot application. entity in project , pom.xml has dependencies it. why error message?: org.hibernate.unknownentitytypeexception: unable locate persister: com.ric.bill.model.bs.par package com.ric.web; import java.util.concurrent.atomic.atomiclong; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; import net.sf.ehcache.cachemanager; import net.sf.ehcache.management.cache; import net.sf.ehcache.management.cachestatistics; import org.hibernate.stat.statistics; import org.springframework.beans.factory.annotation.autowired; import org.springframework.boot.autoconfigure.domain.entityscan; import org.springframework.cache.annotation.enablecaching; import org.springframework.transaction.annotation.enabletransactionmanagement; import org.springframework.transaction.annotation.propagation; import org.springframework.transaction.annotation.transactional; import org.springframework.web.bind.annotati
Read more

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

-
i implementing go program uses bufio.scanner , bufio.writer have packaged code follows package main import ( "fmt" "player/command" "strings" ) func main() { //enter code here. read input stdin. print output stdout commands.scanner.scan() { //scan new line , send comand variable check command exist or not input := strings.split(strings.trim(commands.scanner.text(), " "), " ") command := input[0] if command == "" { fmt.printf("$ %s:", commands.pwd) continue } if !commands.commands[command] { commands.throwerror("cannot recognize input.") } else { commands.execute(command, input[1:], nil) } fmt.printf("$ %s:", commands.pwd) } } i using init.go file in main package follows package main import ( "flag" "player/sourc
Read more

c - double free or corruption (fasttop) -

-
this code reads null terminated string file (file containing null terminated strings & should provide index wanted string). error: *** error in `./main': double free or corruption (fasttop): 0x090a4a80 *** aborted code: char *tmp_realloc=null; char *sstring=null; int i=1; /*set file pointer point string*/ fseek(fh,index,seek_set); sstring=(char*)malloc(sizeof(char)); if(sstring == null) return null; tmp_realloc=sstring; while( (*(sstring+i-1)=(char)fgetc((file*)fh)) != 0x0 ) { /*reallocate more memory*/ tmp_realloc=(char*)realloc((char*)sstring,++i); /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strcpy((char*)tmp_realloc,(char*)sstring); free(sstring); sstring=tmp_realloc; } } could tell me pointer causing issue (& reason) ? remove part /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strc
Read more