I'm working on a site that uses Bootstrap. I'm working to make this site work on both desktop and mobile browsers. Everything's working except for my banner image size.
I have an image that is 640x480. I have an image defined like this:
<img alt="My Picture" src="/wwwroot/img/banner.jpg" style="height: auto; max-height:320px; max-width: 100%;" />
On mobile pages, the image looks just like I want. However, on the desktop, the image is only 320px wide. However, on the desktop, I want the image to go as wide as it can go. Basically, I want to crop the right portion.
Is there a way to do this with CSS?
Thanks!
Stick your CSS in a class.
If using HTML5 remove the superfluous /
Change your max- to min- regards height.
Change your standard width: to auto, changing you
CSS:
.imageFun {
height: auto;
min-height:320px;
width:100%;
/* this is actually no longer needed but kept for posterity */
max-width: 100%;
}
HTML:
<img alt="My Picture" src="/wwwroot/img/banner.jpg" class="imageFun">
Use a media query to target the img in css file:
#media only screen and (min-width : 320px) {
img {
width:100%!important;
}
}
That should work changing the min-width to your desktop size.
More info here
on twitter-bootstrap you can use div with class responsive width :
<div class="col-md-12 col-sm-12 col-xs-12">
<img alt="My Picture"
src="/wwwroot/img/banner.jpg"
style="height: auto; width: 100%;"
/>
</div>
Where value 12 is width scala on grid bootstap. Please look at : https://getbootstrap.com/examples/grid/
i hope it what U want
You are using Booststrap, so remove the inline styling and add
class="img-responsive col-xs-12
That will fix it.
Related
I am new to media queries. I have it setup to swap an image based on the portal size. That is working great with the following code:
<header>
<div class="logo_div">
<img src="images/logo_full.png" class="logo_full">
<img src="images/logo_small.png" class="logo_small">
</div>
</header>
/* Logo DIV */
.logo_div {
margin: auto;
width: 50%;
}
/* Logo */
.logo_small {
display: none;
}
#media (min-width: 1200px) {
.logo_full {
display: block;
text-align: center;
}
.logo_small {
display: none;
}
}
My large logo is centered just fine. My small logo however sits to the right. I have tested this by simply changing the browser window size as well as on my iPhone XSM. On my phone, it is obvious that the small logo is to the far right.
Am I missing something here?
You can see this live also by going to http://thelavender.net/_fades/
For me the best way to center any object is:
#myobjectid{
display:table;
margin:0 auto;
}
In your case put it to your div container, and remove width.
Inside your image, put your width tag.
I want to add that you're making two http requests, for both the large and small logos, when you really need only one. Have you considered using picture?
The HTML <picture> element contains zero or more <source> elements and
one <img> element to provide versions of an image for different
display/device scenarios. The browser will consider each child
<source> element and choose the best match among them; if no matches
are found, the URL of the <img> element's src attribute is selected.
The selected image is then presented in the space occupied by the
<img> element.
This following snippet will produce only one logo at a time and shrink your CSS significantly.
<picture>
<source srcset="logo_full.png" media="(min-width: 1200px)" />
<source srcset="logo_small.png" />
<img srcset="logo_full.png" alt="My default image" />
</picture>
So I have the following desktop layout (which I am completely satisfied with):
This is my attempt to make it mobile:
I like the horizontal scroll here, but I feel that the cards are too thin; I would like to stretch my card to be more box-like (square). Ideally, the card is big enough to fill the gap between the header and the footer without causing
HTML:
<div class="page-content">
<div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%">
<md-card style="width:10rem;" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)"
class="page-card mat-card">
<img md-card-image="" src="assets/img/gallery/brands/256/{{make.name}}.png" class="mat-card-image" />
<md-card-subtitle class="mat-card-title text-center">{{ make.name }}</md-card-subtitle>
</md-card>
</div>
</div>
I've tried many css tricks and tried using flexbox, but there must be something I'm missing (media queries perhaps, and how to override them).
How can I make the following styles apply ONLY to mobile?
min-height: 375px;min-width: 278px;
If anyone has any direction on how to accomplish this design, it would be greatly appreciated.
In order to get a different style for mobile, we do this:
#media (max-width: 600px) {
md-card {
min-width:17rem;
}
}
I have a page, when i am looking this page on a laptop screen the two divs are rendering properly but when i am looking this page on mobile screen these two divs are overlapping above each other. I want to remove this overlapping of these divs and want to read first div then second div.
How to do that ?
#media only screen and (max-width:768px){
.vc_row-fluid.lighter-overlay,
.vc_row-fluid.darker-overlay{
display:inline-block; /* Change this to inline-block instead of block */
}
}
but this is creating issue for header,solve that accordingly
check out with Bootstrap. it provides with responsive CSS. you have to include the div class that you require.
example: if you have two divs, put them into one main div and then call each div with separate div class. like
<div class="col-sm-12">
<div class="col-sm-6">
// your code for first div
</div>
<div class="col-sm-6">
//your code for second div
</div>
</div>
try like this. it may help you.
I hope i understand your question because its not really clear(No code provided)
But what i think you need to do is the following:
<!-- Probably your html part -->
<div class = "wrapper">
<div class = "container">
<!-- Some content-->
</div>
<div class = "container">
<!-- Some content-->
</div>
</div>
Here comes the css magic.....
.wrapper{
display:block;
}
.container{
display: inline-block;
}
#media only screen and (max-width:768px){
.container{
width:100%;
}
}
#media only screen and (min-width:768px){
.container{
width:50%;
}
}
By using media querys you can easily fix this kind of stuff
You added as a comment to your question that a demo URL was http://voyagecontrol.com/canarywharf
Origin of the problem: #venue_draft has inline styles including height: 900px.
Solution: it should be removed (elements should adapt automatically to more or less content. Not fixing height is a good start for that) or, if other problems occur, replaced by min-height: 900px
I'm creating an iPhone app using PhoneGap and jQuery mobile. I'm using a simple image tag and set the width to 100% and height to auto, but the image is not scaling properly and gets cut off. I have also tried using max-width with the same outcome. Any idea how I can solve this?
<div data-role="page">
<img class="banner" src="..." style="width: 100%; height: auto;">
</div>
I have even tried this:
$('img.banner').each(function(){
$(this).width($(window).width());
});
Previously i have gone through same problem. I tried min-height. And why both maximum-scale=1, minimum-scale=1? Try minimum-scale=1. Just give a try
I'm assuming that your image is actually nested in a div with a data-role="content" and your problem is that class ui-content by default has a 15px padding.
The simplest way to correct that would be to simply override the CSS for that page to get rid of that padding, if you need it for other elements then just wrap them in a div and add padding to those divs.
For example
CSS
.imgContPage { padding:0px; }
Markup
<div data-role="page">
<div data-role="content" class="imgContPage">
<img class="banner" src="http://dummyimage.com/600x400/000/fff.png&text=PlaceHolder" style="width: 100%; height: auto;">
</div>
</div>
Link to JSBin
Alternatively you can set a negative margin on your img to compensate for the padding, but then you will need to calculate the width so that it fills up to the right side.
Ok, I feel very stupid right now. I was getting that image from a JSON response that was coming from a Wordpress website. When I was parsing my JSON to get to the image, I was using the thumbnail version of the image (which in my surprise, it's not really a scaled thumbnail, it's just a cropped 150x150 square of the main image).
So I changed my reference from:
json.page.thumbnail
to
json.page.attachments[0].images.full.url
And now the image scales just fine (width: 100%, height: auto).
Thanks everyone for your helps
I have many absolute position div , how can i change it align to center when orientation change to center?
lets say
<div style="position:absolute; top:0px;left:0px">
<div style="position:absolute; top:0px;left:11px">asd</div>
<div style="position:absolute; top:0px;left:15px">asd</div>
</div>
I tried margin: 0 auto and it conflicted with the absolute also.
the reason to have the positioning as absolute because there will be animation of the div and many div will stack on a place
You need to get rid of the positioning and setup the widths and margins for each orientiation to make this work..
This is based on the
/* Portrait */
#media screen and (max-width: 320px)
and
/* Landscape */
#media screen and (min-width: 321px)
{
CSS methods.
I have set up an example for you here.
To see it live either copy the url from this jsbin page and view it in the iPhone emulator or view it in a real mobile browser.
I think i have solve this by
<div style="position:relative; margin: 0px auto;">
<div style="position:absolute; top:0px;left:11px">asd</div>
<div style="position:absolute; top:0px;left:15px">asd</div>
</div>
because by setting the parents to relative the top: 0 left : 0 of the children div will be at the top left corner of the parent div
the more detail explanation of this positioning is at http://www.barelyfitz.com/screencast/html-training/css/positioning/
So simple
.[you-class-name]{
......
Other element for design the div
.........................
left: 50%; //Most Import to align center of screen, tested in all browser
}