html - How do I make an image appear on desktops and tablets, but not on phones, using bootstrap? -


i working on small project of mine. it's website booking tours. i'm still in stages, looks like: homepage

as can see, each tour has own "div" divided in 3 columns: preview image, short description , button book tour. can add image background, if shrink page size mobile, second div appears above first 1 image in it, this: homepage mobile size

i have no idea why occurs. of have idea how make div image disappear on mobile or how solve problem? html , css code provided below, using bootstrap.

ps: ignore white-space around button.

body {  	margin: 0px;  	padding: 0px;  }    .jumbotron {  	border-radius: 0px;  	margin-bottom: 0px;  }    .options {  	margin-top: 30px;  }    .tours {  	padding: 0px;  	margin-bottom: 25px;  	border-radius: 5px;  	border: 1px solid grey;  	max-width: 100%;  	height: 20vh;  }    .preview-img {  	height: 100%;  }    .short-descr {  	padding-top: 2vh;  	height: 100%;  	background-color: red;  }    .more-info {  	height: 100%;  	padding: 0px;  }    .infobtn {  	height: 100%;  	width: 100%;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <!doctype html>  <html lang="en">  <head>  	<title>home</title>  	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">  	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgfzhoseeamdoygbf13fyquitwlaqgxvsngt4=" crossorigin="anonymous"></script>  	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-vazp97zcwtekasvgpbsuwpfkdrwd3unufsgvyrahuqu=" crossorigin="anonymous"></script>  	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  	<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>  	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">  	<link rel="stylesheet" type="text/css" href="css/datepicker.css">  	<link rel="stylesheet" type="text/css" href="css/homepage-style.css">  </head>  <body>    	<!--jumbotron, header website-->  	<div class="jumbotron text-center">    		<div class="container">  			<h1>title</h1>  			<p>description</p>  		</div>    	</div>    	<!--these columns in tours displayed-->  	<div class="container options">  		  		<div class="col-xs-12 tours">    			<div class="col-sm-3 preview-img">    			</div>    			<div class="col-xs-9 col-sm-7 short-descr">  				<h4 class="text-left">column 1</h4>  				<p class="text-left">lorem ipsum dolor sit amet...</p>  			</div>    			<div class="col-xs-3 col-sm-2 more-info">  				<button type="button" class="btn btn-info infobtn" href="#">more</button>  			</div>    		</div>    		<div class="col-xs-12 tours">  			  		</div>    		<div class="col-xs-12 tours">  			  		</div>			    	</div>  	    </body>  </html>

add hidden-xs class preview-img div

http://getbootstrap.com/css/#responsive-utilities


-

Comments

Post a Comment

Popular posts from this blog

php - Permission denied. Laravel linux server -

when try register , send email user got error. working till yesterday. today gives me , cant figure out why. way on local testing work's. i'm stuck. please errorexception in compiled.php line 7512: file_put_contents(/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php): failed open stream: permission denied in compiled.php line 7512 @ handleexceptions->handleerror('2', 'file_put_contents(/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php): failed open stream: permission denied', '/var/www/html/bootstrap/cache/compiled.php', '7512', array('path' => '/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php', 'contents' => 'please activate account clicking on following link. <a href="<?php echo e(route('auth.activate', $token)); ?>"><?php echo e(route('auth.activate', $token)); ?...
Read more

google bigquery - Delta between query execution time and Java query call to finish -

context our container cluster located @ us-east1-c we using following java library: google-cloud-bigquery, 0.9.2-beta our dataset has around 26m rows , represents ~10g all of our queries return less 100 rows grouping on specific column question we analyzed last 100 queries executed in bigquery, these executed in 2-3 seconds (we analyzed calling bq --format=prettyjson show -j jobid , end time - creation time). in our java logs though, of calls bigquery.query blocking 5-6 seconds (and 10 seconds not out of ordinary). explain systematic gap between query finish in bigquery cluster , results being available in java? know 5-6 seconds isn't astronomic, curious see if normal behaviour when using java bigquery cloud library. i didn't dig point analyzed outbound call using wireshark. our tests executed in our container cluster (kubernetes). code queryrequest request = queryrequest.newbuilder(sql) .setmaxwaittime(30000l) .setuselega...
Read more

python - Pandas two dataframes multiplication? -

i have 2 data frames (a , b) a: column 1, column 2, column 3 0.1 0.5 0.7 b: row 1 5 row 2 6 row 3 7 how perform multiplication like (0.1)*5, (0.5)* 6, , (0.7)*7? in other words, how multiply value in first row of b value in first column of a, second row of b value in second column of b, , etc? you want multiply values without respect whether rows or columns. pd.series(a.values.ravel() * b.values.ravel()) 0 0.5 1 3.0 2 4.9 dtype: float64
Read more