I am new to bootstrap coding and CSS I am stuck in one issue where in the desktop version i need one image but when it comes to the mobile version i need the second image to be shown and first image should hide.
<div class="col-md-9" style="padding: 0px;">
<img src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
Help needed.
Please implement this code.
You can change max width in media query according to your need. Also please expand snippet to check hide and show image according to device.
I hope it will work for you.
<style>
.image_section img{
display: block;
}
#media (max-width:640px){
.image_section img:first-child{
display:none;
}
}
</style>
<div class="col-md-9 image_section" style="padding: 0px;">
<img src="images/Trinity-Garden-landing-Page-1.jpg" />
<img src="images/Trinity-Garden-landing-Page-4.jpg" />
</div>
Use the below code, It might help you..
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="Masters_baby.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
#media(max-width:767px){
.image1 {
display: block!important;
}
.image2 {
display: none !important;
}
}
</style>
</head>
<body>
<div class="row">
<img src="img/kiran.png" alt="img1" style="height: 200px;width: 200px;display:none;" class="image1">
<img src="img/kiran2.png" alt="img1" style="height: 200px;width: 200px;display: block;" class="image2">
</div>
</body>
</html>
In that I used #media query to hide first image and display second image on mobile view.
You can use bootstrap responsive utilities for showing/hiding components based on the screen size.
Your code snippet has been modified as an example.
The first image will be visible in medium sized screens only
The second image will be hidden on medium sized screens
<div class="col-md-9" style="padding:0px;">
<img class="visible-md-block" src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img class="hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
UPDATED :
Try these classes :
http://getbootstrap.com/css/#responsive-utilities-classes
for the image that must only show in the desktop use :
hidden-xs hidden-sm hidden-md
for image that must show only on mobile use :
hidden-lg hidden-xl
example :
<div class="col-md-9" style="padding:0px;">
<img class=" hidden-lg hidden-xl " src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img class="hidden-xs hidden-sm hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
You may want to have a look at the picture element. Support is quite good now.
Example:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Related
In tailwindcss, it seems like the start col-start-{n} class is ignored if you set span col-span-{n} class on a screen breakpoint. For example: col-start-2 col-span-2 md:col-span-3 when you reach the md breakpoint the col-start-2 is ignored.
Is this the expected behavior in tailwind? I can't find it documented anywhere.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p>The 😲 should always start at column 2, but when it reaches the "md" screen width, it starts at column 1</p>
<div class="grid grid-cols-6 gap-2">
<div class="col-start-2 col-span-2 bg-red-50 md:col-span-3">😲</div>
</div>
<!-- SCREEN SIZE DEBUG HELPER, IGNORE -->
<div class="p-1 fixed mt-50 text-24 text-red-0 bg-purple-400 text-white rounded-lg">
<span>Screen Size:</span>
<span class="hidden 2xl:inline">2XL</span>
<span class="lg:hidden hidden md:inline">MD</span>
<span class="md:hidden hidden sm:inline">SM</span>
<span class="sm:hidden inline">XS</span>
</div>
</body>
</html>
The problem as you mentioned, the col-span will override the col-start
Here is a comment I found by the creator of Tailwind CSS
Solution:
Add md:col-start-2 class, and it should work perfectly.
I want to increase the image size whenever the window size decreases and I used the media queries for that. whenever the window size is 423 then the image size increases. so I tried using media queries but it didn't apply to that tag. how to increase the size? this is my HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
#media screen and (max-width:768px ) and (min-width: 320px)
{
.samyata {
width:100px;
height:auto;
}
}
</style>
</head>
<body>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id = "first" style="margin-left:7%" >
<div class="col-sm-6">
<img src="Assets/img/sam.png" class = "samyata"
hspace="30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform
and ecosystem to bring stores, shoppers and
personal shoppers together in a geographically
specific, simple buying and selling experience.
</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
</div>
<div class="col-sm-6">
<img src="Assets/img/vahaka.png" hspace = "30" class = "vahaka" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left">
Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases.
Be your own boss. Do it when you want.
Get paid right away.
</p>
<a href = "#" class ="text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>
</div>
</div><br><br>
<div class = "row" style="margin-left:7%">
<div class="col-sm-6" >
<img src="Assets/img/gananam.png" hspace = "30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores
for a new way to make money,
reach new customers and deliver
products to your customers.</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a><br><br><br>
</div>
</div><br>
</div>
</body>
How to apply that? please help me out from this problem. I want all the images and text side by side when the window size is decreases and increase but when i decreases i comes same part of the text under the image. i want all the text on the same side of image.
The img with class="samyata" has its style inline (i.e. in a style attribute). This will always override the style in the stylesheet.
Solution: take the style out of the attribute and put it in the stylesheet, above the media query.
Your other problem, the text wrapping around below the images, can be solved by putting the text in a block of its own and giving that a left margin.
.samyata, .vahaka, .gananam {
width: 28%;
height: 40%;
float:left;
}
.row {
padding-bottom: 1em;
}
.block {
margin-left:37%;
}
.col-sm-6 h5 {
margin-top: 0;
font-family: 'Fira Sans Condensed';
text-align: left;
}
#media screen and (max-width: 768px) and (min-width: 320px) {
.samyata, .vahaka, .gananam {
width: 100px;
height: auto;
}
.block {
margin-left:130px;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id="first" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/rblbG.jpg" class="samyata">
<div class="block">
<h5> Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform and ecosystem to bring stores, shoppers and personal shoppers together in a geographically specific, simple buying and selling experience.
</p>
Explore Samayata
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/N3atj.jpg" class="vahaka">
<div class="block">
<h5> Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases. Be your own boss. Do it when you want. Get paid right away.
</p>
Explore Vahaka
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/TUvgC.jpg" class="gananam">
<div class="block">
<h5> Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores for a new way to make money, reach new customers and deliver products to your customers.</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a>
</div>
</div>
</div>
</div>
Also, don't use hspace. It is deprecated and has compatibility problems. Use margins instead.
Edit: I made some changes, but I'm not sure it looks the way you want now. So consider this a work in progress.
Being new to bootstrap and scripting with html/css in general, I am attempting to create a simple html table (one row with three columns). Each column is to be even (taking up one third of the table which it exists inside of. The problem I am encountering is that it appears to be taking up only two-thirds (2/3) of the available space with in the table. I've looked on the internet for solutions, googled, read a several posts/articles on stack and other places, but I've not found a solution and am hoping for help.
You can see a straight html render of the error here
Here is a picture detailing the issue:
As the example image shows the thin red column is taking up one third of the table space (green bordered table), however that table is not expanding to occupy the full space available to it in the red div. I've looked for through the html render and not found a cause for the issue.
<div class="area">
<section class="wrapper scrollable">
<div class="main-grid">
<div class="agile-grids">
<!-- blank-page -->
<div class="blank">
<div class="blank-page">
<h1>Session is active</h1>
<table class=" " style="border: 1px solid red;">
<tbody>
<tr scope="row" style="border: 1px solid red;">
<td class="text-center" style="border: 1px solid green;">
<div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;">
<div class="card_user-charProfile">
<img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan">
<div class="card">
<div class="card">
<p> content goes here</p></div>
</div>
</div> <!-- end row -->
</div><!-- end CHARACTER PROFILE OUTER DIV -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
Here are the CSS declarations / links
<script language="JavaScript" type="text/javascript">
<!-- This JS disallows hijacking into someone else's frame...
if (top.location != self.location){top.location=self.location}
//-->
</script>
<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet">
<!-- font CSS -->
<!-- roboto -->
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- lato -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- hammersmith one -->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<!-- __themes/_fonts/font-glyphicons.css -->
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet">
<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script>
$(function () {
$("#supported").text("Supported/allowed: " + !!screenfull.enabled);
if (!screenfull.enabled) {
return false;
}
$("#toggle").click(function () {
screenfull.toggle($("#container")[0]);
});
});
</script>
Why are you using the table? You can handle that all with the bootstrap grid system. Avoid using table in your project. But I will suggest you to give it a width:
td{width:100% !important;}
Try doing this it may help you.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I use bootstrap v.3 and I wanted to make a diferrent button, so I copy all the css classes for btn-primary, renamed to myBigButton and apply my changes. Here works perfect. However in my page the new class 'myBigButton' doesnt exist (when I inspect element from the broswer..)
I have the same code in my page
<div class="container">
<div class="row ">
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">cccccc</button>
</div>
</div>
</div>
any ideas why?
The strangest is that if double write the css class
.myBigBtn {
color: #ffffff;
background-color: #5A6E9E;
border-color:#5A6E9E;
line-height: 100px;
font-size: 23px;
}
.myBigBtn {
color: #ffffff;
background-color: #5A6E9E;
border-color:#5A6E9E;
line-height: 100px;
font-size: 23px;
}
works..
UPDATE
I add all the css file here where it doesn't work either..
Your problem is the comment:
//here is my class
Comments in css are done like this
/* here is my class */
Change the comment to this and it should work
Everything works fine!
Include your CSS file in the <head> after the Bootstrap CSS:
...
<head>
Bootstrap CSS
Custom CSS
</head>
...
HTML should look like this:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BOOTSTRAP TEMPLATE</title>
<!-- Bootstrap CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="body">
<div class="container">
<div class="row ">
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">cccccc</button>
</div>
</div>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
The custom CSS:
<link rel="stylesheet" href="css/custom.css">
It's good practice to link to an external CSS file.
.myBigBtn and .btn have same prioprity, so styles are applied in order css files are included to page. And so .btn override your styles. That's the most probable cause.
Using JqueryMobile, I wish to achieve the following layout:
Having nice decorations boxes to separate my input lines
Having one checkbox aligned vertically with an input text field, both on the same line
But after many attempts, the only layout I could come from with is the following:
The first attempt looks kind of right using jquerymobile grids, but my checkbox is not selectable anymore and remains checked forever. The second attempts uses the fieldset as proposed by the jquerymobile, but, I loose the checkbox and I tried using the css float property, without success.
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body style="font-size: 12px;">
<div data-role="page" id="one">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 20%;" >
<div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;">
<div class="ui-checkbox">
<label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span>
</span>
</label>
</div>
</div>
</div>
<div class="ui-block-b" style="width: 80%;" >
<div class="ui-bar ui-bar-e" style="height:24px">Block B</div>
</div>
</div>
<div style="height: 200px;">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" class="custom" />
<label for="checkbox-mini-0" > </label>
<input type="text" name="texta" id="texta" class="custom" style="width:36px;" />
</fieldset>
<div style="height: 30px; border:1px solid lightgray;">
</div>
<div style="height: 30px; border:1px solid lightgray;">
</div>
</div>
</div>
</div>
</body>
</html>
Any help or comments to achieve my goal would be appreciated ?
Online editor: You can access the html file also on http://jsfiddle.net/alain_lavoie/XhsEh/
http://jsfiddle.net/XAsyy/110/
Updating from Nirmal Patel ans, I found textarea to work with checkboxes and if you do not want the textarea to grow:
data-role="none" ie. <textarea id="test" data-role="none"></textarea>
http://jsfiddle.net/XAsyy/144/
or, use:
css resize: none;
http://jsfiddle.net/nirmaljpatel/XAsyy/