I've got an image that is displayed when viewing the website on a computer; however, I want it to be hidden when the site is viewed on a mobile device. I've just used the 'display: none;' CSS but for some reason it's not working.
HTML:
<div class="col-sm-7 col-sm-offset-1">
<img src="./images/testing.jpg" alt="">
</div>
CSS:
.col-sm-7 {
display:none;
}
Thank you.
Just add the class hidden-xs and/or hidden-sm.
See the docs for more info
Try using Bootstrap Responsive Utilities
.hidden-xs
<div class="col-sm-7 col-sm-offset-1 hidden-xs">
<img src="./images/testing.jpg" alt="">
</div>
Related
I am trying to upload an image using the img tag. But even linking the image correctly it is not rendering on the screen
Here is the code.
<div class="row">
<div class="col-6">
<h2>MUSEUM OF CANDY</h2>
</div>
<div class="col-6">
<img class=" img-fluid" src="imgs/hand2.png" alt="handimage">
</div>
</div>
</section>
Your source location might not be accurately defined. Please check through it once. If your alt information is visible. Then your problem is in source location.
there is a space in the class at the beginning of "; maybe that's the problem :)
Hey guys I am trying to create a 50:50 ration on my split screen layout.Text on one side and picture on the other I was able to get this far.
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img" src="assets/img/prg.jpg">
</div>
</div>
</div>
CSS
.img {
width: auto;
height: 250px;
}
Try using Bootstrap's grid system. Here's some example HTML you could use:
<div class="row">
<div class="col-md-6">
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>
This will put the text section on the left side of the page and the responsive image on the right. If the page is collapsed so it can't fit both horizontally they will stack. You can change this if you like. For more information see Bootstrap's guide on the Grid System. http://getbootstrap.com/css/#grid
What you should use is col-xs-6 instead of col-sm-6 because col-sm-x is used for screens with min-width: 768px or higher.
You may be seeing it showing at the bottom because your using sm instead of xs and the screen resolution is below 768px.
Currently I have an image saved in my project of a map that I would like to include in my solution, my first website. I'm very new to ASP.NET and CSS but have some HTML experience. I am having trouble figuring out how to center and stretch the image appropriately so that regardless of the size of the browser window, the center of the map always remains centered accordingly.
Please advise!
<section>
<div class="container-fluid">
<div class="row">
<img src="/img/additional/map.png"/>
</div>
</div>
</section>
EDIT 1:
I've found on http://getbootstrap.com/css/#images the following information
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.
SVG images and IE 8-10
In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
<img src="..." class="img-responsive" alt="Responsive image">
Added class="img-responsive center-block" according to http://getbootstrap.com/css/#images .
<section>
<div class="row">
<img class="img-responsive center-block" src="/img/additional/map.png"/>
</div>
</section>
Just simply add center tag to the image.
<section>
<div class="container-fluid">
<div class="row">
<center>
<img src="/img/additional/map.png"/>
</center>
</div>
</div>
</section>
If are you using bootstrap, you can do it:
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
You could also use pure CSS, for example:
.
center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
add class center-block
Ref : here
e.g : <img class="center-block" src="/img/additional/map.png"/>
Using Twitter Bootstrap 3, I have two colummns, one with an image and the other has text. I'm trying to place the two side by side for desktop view, but then for smaller screens (mobile,tablet) the text has to fall beneath the image. I have tried various float and positions css but unsuccessful.
Code:
<div class="row">
<h2>History</h2>
<div class="col-md-6">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6">
<p> text </p>
</div>
</div>
</div>
If anyone has the time to provide some details of what CSS i should be using, I would be greatly appreciated. :-)
By now you're just telling the browser: "Hey, if I am on a medium screen device (col-md-6) let's take 6 out of 12 blocks for displaying!"
You need to add the class for the mobile view too:
<div class="col-md-6 col-sm-12">
So now, the mobile browser also knows, that he should use the full 12 blocks to display.
For further information about how to use the grid system of bootstrap take a look at this.
try this
<img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/>
//or might be possible
<style>
.custom > img{
width:100%;
}
</style>
<div class="row">
<h2>History</h2>
<div class="col-md-6 col-sm-6 col-lg-6 custom">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<p> text </p>
</div>
</div>
I have a set of Bootstrap thumbnails on my web page and I have set all the images with class .img-responsive. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with css.
Here are my thumbnails:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
... altogether 12 thumbnails
</div>
I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:
#media(max-width:767px){
.thumbnail > img {
height:70px;
width:120px;
}
}
However the width doesn't seem to surpass 80px, it seems like I can only set width up to around 80px and anything higher won't do anything.
If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and I need a way to increase the size of the thumbnails on mobile devices only.
Here is a link to the site:
Change col-xs-6 to col-xs-12
So instead of
<div class="col-xs-6 col-md-3">
You'll have
<div class="col-xs-12 col-md-3">
This will make it so that each thumbnail will take up the full width of the phone, instead of having two across.
I have fixed the problem, I found that I had the below code elsewhere in my CSS that I didn't take notice of. This below media query was what made my images appear so small on mobile devices, I took it out and now images appear fine. Thanks for the help guys.
#media(max-width:767px){
.thumbnail > img {
height:40px;
}
}