I'm using Angular Typeahead with a custom search-template, and for some reason the custom template won't respond when I set it's width to "100%".
I've also tried using jQuery to change the height, but it won't respond to this either, which leaves me with the last choice of creating media queries for every width I need.
I'm using SASS, and my question is: Is there a way of making the width of a div 100% without using the "100%" property?
My code looks like this:
<script type="text/ng-template" id="customTemplate.html">
<a class = "searchTemplate">
<span ng-bind-html="match.model.name | typeaheadHighlight:query"></span><br>
<span ng-bind-html="match.model.ticker | typeaheadHighlight:query"></span>
</a>
</script>
Working SASS/CSS:
.searchTemplate {
#media screen and (min-width: $break5) {
width: 500px;
}
#media screen and (min-width: $break4) and (max-width: $break5) {
width: 500px;
}
#media screen and (min-width: $break3) and (max-width: $break4) {
width: 400px;
}
#media screen and (min-width: $break2) and (max-width: $break3) {
width: 300px;
}
#media screen and (min-width: $break1) and (max-width: $break2) {
width: 200px;
}
}
Not working SASS/CSS:
.searchTemplate {
width: 100%;
}
Please help me solve this issue.
try this css:
left:0;
right:0;
Related
I have two divs that are 368px x 228px sitting next to each other but each time I try to apply media queries and run a few tests, it doesn't seem to be working at all. How do I go about resolving this issues.
See my code below:
<style type="text/css">
.block-content-right {
background-color:#e0e620;
flex:1;
}
#media (max-width: 600px) {
.field__item {
width: 100%;
}
}
#media (min-width: 400px) {
.field__item {
width: 100%;
}
}
</style>
<div class="block-content-right">
<p>The people the people the people</p>
</div>
<div class="field__item">
<img src="blah blah.jg";>
</div>
Need some help guys. Thank you.
Your media queries are working, but at least one of them is always going to be active.
Perhaps what you wanted was this:
#media (max-width: 600px) and (min-width: 400px) {
/* This will be active if the screen is between 600px and 400px */
.field__item {
width: 100%;
}
}
Or maybe this:
#media (max-width: 400px) or (min-width: 600px) {
/* This will be active if the screen is NOT between 600px and 400px */
.field__item {
width: 100%;
}
}
Note: For testing purposes, you may want to use a different CSS rule. With the code you are showing, the "width: 100%;" doesn't do anything because divs have 100% width by default. Try using "border:5px solid red;"
Code to stack elements if the page is narrow: (Going into full screen causes the elements to be placed side-by-side)
#media (min-width: 800px) {
.half-width {
display: inline-block;
width: 49%;
}
}
<img class="half-width" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/640px-Zinnia_elegans_with_Bombus_01.JPG" />
<div class="half-width">Here is some text. More and more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text.</div>
I'm really confused. For some reason, my code just simply allow this happen. If I put height: auto;, the image disappears so I'm forced to put in a number manually, for example, 700px. Here's a JSFiddle for reference
How would I maintain this image's width and height in portrait view on mobile?
HTML:
<div style="background-image: url("https://mario.nintendo.com/static/fd723b2893d4d2b39ef71bfdb4e3329c/579b4/mario-background.png");" class="cpi-wall-detailed-image"></div>
CSS:
.cpi-wall-detailed-image {
width: 100%;
height: 768px;
}
Try something like this:
.cpi-wall-detailed-image {
width: 100%;
height: 768px;
}
#media only screen and (max-width: 600px) {
.cpi-wall-detailed-image {
zoom:0.5
}
}
#media only screen and (max-width: 475px) {
.cpi-wall-detailed-image {
zoom:0.4
}
}
try this then :
.cpi-wall-detailed-image {
width: 100%;
height: 2316px;
}
#media only screen and (max-width: 600px) {
.cpi-wall-detailed-image {
zoom:0.37
}
}
#media only screen and (max-width: 475px) {
.cpi-wall-detailed-image {
zoom:0.325
}
}
How to handle Banner image responsive for different devices like small and medium mobile and tablet.?
Width:
.banner
{
max-width: 100%;
height: auto;
}
Media Query:
#media only screen and (min-width: 960px) {
.banner
{
width: 960px
height: auto;
}
#media only screen and (min-width: 1440px) {
.banner
{
width: 1440px
height: auto;
}
}
#media only screen and (min-width: 2000px) {
.banner
{
width: 2000px
height: auto;
}
}
#media only screen and (max-device-width: 480px) {
.banner
{
width: 480px
height: auto;
}
}
#media only screen and (device-width: 768px) {
.banner
{
width: 768px
height: auto;
}
}
You can use bootstrap framework. add img-responsive class to image
<img src="1.jpg" class="img-responsive" alt="image" >
It also depeds on your image, does the main content of your image occupies all the space?, is there anything you can cut? if that's the case, you can achieve it with object-fit, object-position, and the width and height will not vary too much.
If you can modify by yourself the image, use the img srcset property, where you designate which image should be displayed in different resolution breakpoints.
If none of previous options suits you, try with vmax, you'll have fun guessing the right measures, but once that it's done, you won't need too much media queries
Finally, there's the tedious way, setting various media queries.
I am trying to make container fixed size 750px for all sized windows.
Here is HTML:
<div class="container">
<div class="thumbnail" >
..........<br/>
..........
</div>
</div>
and custom CSS:
#media (min-width: 1200px) {
.container {
width: 750px;
}
#media (min-width: 992px) {
.container {
width: 750px;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
But the problem is when I am resizing window from big to small at some point size of thumbnail is getting a little larger and then reverses to its initial size.
Here is a fiddle http://jsfiddle.net/Wy22s/718/ . You can just resize browser window or slide inner window in fiddle itself to left and then to right to reproduce this behavior.
I have tried to add another div with row class. Tried combinations with col-sm, col-md etc, but I can not manage to achieve desired behavior. How can I fix this so the container/thumbnail size stays the same?
you forgot to close the #media brackets.
#media (min-width: 1200px) {
.container {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container {
width: 750px !important;
}
}
#media (min-width: 768px) {
.container {
width: 750px !important;
}
}
.container{ width: 750px !important;}
.thumbnail{ width: 750px !important;}
I am using media queries as below
#media (min-width:100px) and (max-width:639px)
{
}
#media (min-width:640px) and (max-width:960px)
{
.box {background-color:red;}
}
#media (width:768px)
{
.box {background-color:green; }
}
#media (min-width:961px)
{
}
I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in #media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 #media (min-width:768px)
At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.
How can i target certain element using media queries for specific devices
example :http://jsfiddle.net/X43Et/
Update:
I am not sure what exactly was wrong with it put i copy pasted #media (width:768px) { part from fiddle & it works in my actual page.
May be some invisible typo mistake..
This is just an example of media queries You would want to have your normal css before the media queries
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
And when you're using media queries, you want to specify that you want the screen size so you use screen after #media. I hope this is what you were looking for and will help you!
Here is a small example script I made
<style>
#box {
width: 500px;
height: 200px;
background: yellow;
border: 1px solid #000;
}
#media screen and (max-width:1000px) {
#box { background: red; }
}
#media screen and (min-width:1000px) and (max-width:1200px) {
#box { background: green; }
}
#media screen and (min-width:1200px) and (max-width:1400px) {
#box { background: blue; }
}
</style>
<div id="box">
</div>
On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.