For my site on cruiseguru.co.th, the search box on the left overlaps with page content when screen size is between width 1200px and 765px so I was hoping to change width of the search box only on between two resolution with a css like the one below but of course it doesn't work so it would be great if anyone can advise me the right css.
#media screen (max-width:1200px) and (min-width:765px) {
#IFRAME_2 {
max-width: 360px;
};
You're missing and between screen and (max-width:1200px)
#IFRAME_2 {
width: 600px;
}
#media screen and (max-width:1200px) and (min-width:765px) {
#IFRAME_2 {
width: 360px;
}
}
<iframe id="IFRAME_2"></iframe>
I'm not a css expert and struggling a bit with this need.
Consider this site
Right now the logo image is sized nicely for mobile but looks way too small for desktop browser.
If I change the size to look good on desktop browser it doesn't size down for mobile and consequently blows out to the right.
I feel these are the css settings involved but of course open to further instruction.
So the image size is 3800 X 1200
The actual image style I THINK should remain at 100% and not exceed 240px.
These settings will make it look acceptable for the mobile but then too small for desktop.
<img alt="Northern Legacy Auto" title="Northern Legacy Auto" src="http://localhost:15536/content/images/thumbs/0000020.png">
#media (min-width: 240px)
.header-logo a img {
max-width: 100%;
}
....
#media (min-width: 240px)
.header-logo a {
display: inline-block;
/* width: 195px; */
height: 118px;
line-height: 0;
background-repeat: no-repeat;
}
If I reverse the settings then it will look great on the desktop and blowout (not dynamically resize) on the mobile?
Thanks
Are you sure you are looking for the media query solution? You might can just get away with a responsive image. JSFiddle
HTML
<img src="http://placehold.it/200x100">
CSS
img {
width: 90%;
max-width: 240px;
margin: 0 auto;
display: block;
}
I have .psd design for client site, graphic designer drew container width up to 1920px, and I need a help how to properly set up width of container to 1920px.
I know how to set up smaller
#media (min-width: 1200px)
.container {
width: 1170px;
}
Instead of forcing your containers to 1920px and overriding the default bootstrap grid sizes, you may want to look at .container-fluid, which is inside Bootstrap's packaged css.
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
Link: http://getbootstrap.com/css/#overview-container
You could utilize Bootstrap's container-fluid class to fill the entire width first, then you can restrict the width responsively... Here is an example in Sass:
.wide-container {
#extend .container-fluid; // which has max-width: auto; (full)
}
// on medium screens and beyond...
#include media-breakpoint-up(md) {
.wide-container {
max-width: 1470px; // limit the width here!
}
}
Just reuse the media query you have above, and simply decide when you want the container to change to that size (something greater than 1920px).
#media (min-width: YOUR VALUE HERE)
.container {
width: 1920px;
}
OR, upon reading your question again, you said, "up to 1920px", so a fluid container?
Then simply set:
.container {
max-width: 1920px;
width: 100%;
}
Your problem is not clear enough. but if you want to set up 1920px wide container, just override the default container width with "!important". like this,
.container { width: 1920px !important; }
Or if you wish to 1920px container only for larger displays, you can use media query like this,
#media (min-width: 2400px) {
.container {
width: 1920px;
}
}
this rule will apply only for displays that is at least 2400px wide.
You can apply your own CSS according to the screen size you want to show as the below example will work on a larger resolution size than 1599px.
#media (min-width: 1600px)
.container {
max-width: 1500px;
}
You could override BootStrap's default styling as the answers above describe, or you could create a new class such as:
.container.wide {
width: 1920px;
}
Then add the class to the container <div>'s such as:
<div class="container wide">
CONTENT
</div>
This ensures only the <div>'s you add the wide class to are effected, meaning you're still free to use <div class="container"> for normal BootStrap container behavior if required.
EDIT
As Vikas has said in his comment, the above style would apply also on mobile. In this case, just wrap in a media query as follows:
#media (min-width: 1950px) {
.container.wide { width: 1920px; }
}
This css will override bootstrap's container sizing. Adjust the max-width values as needed. Tested with bootstrap 4.6.1
/* Override bootstrap to make containers wider by 60px */
#media screen and (min-width: 576px) {
.container, .container-sm {
max-width: 600px;
}
}
#media screen and (min-width: 768px) {
.container, .container-md, .container-sm {
max-width: 780px;
}
}
#media screen and (min-width: 992px) {
.container, .container-lg, .container-md, .container-sm {
max-width: 1020px;
}
}
#media screen and (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1200px;
}
}
Based on your reactions you probably want
.container{
width: 1920px !important;
}
though I don't understand why :). On every smaller resolution it will scroll now.
Hi and thanks for reading, am building this site http://myspacioclub.com and am using a wordpress responsive theme, and I got this image "bannerfb" with class "banner" that was asked for the customer. So inside the space for the logo I create a new div to put the banner and added this properties to the div of the banner:
.banner {
position:relative;
top:-170px;
left:450px;
}
but as the theme is responsive, when i make windows smaller like the size of tablet or cellphone the layout breaks, can someone help me?
How could I fix the theme that only use the banner properties when the window is in a bigger resolution, or any similar solution but the idea is to keep the banner with those properties without been affected by the smaller size.
You can achieve this different ways, but one way is following: First wrap your logo and banner in a div
<div class="wrap">
<div class="logo">
<a href="">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/Myspacioclub.png"/>
</a>
</div>
<div class="banner">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/bannerfb.jpg"/>
</div>
</div>
Then add following CSS:
.wrap {
position: relative;
width: 100%;
}
.logo {
width: 50%;
float: left;
}
.banner {
width: 50%;
float: right;
}
.banner img, .logo img {
width: 100%;
height: 100%;
}
You can see working example in here. Also, I have to point out, that at least at the moment you are using more than 7000px width image in your banner. This is NOT what you should do. You banner, at least in with my screen, is 700px wide. DO NOT ever use bigger images than you need. It shows 700px wide image, but you still have to load the 7000px one. Convert to smaller size! If you necessarily need bigger image for big screens, you could use javascript or css #media tag to load different image for different screen size. For that you have to set your banner image as background not as <img> and then do something like this in CSS:
#media only screen and (min-width: 35em){
/* Style adjustments for viewports that meet the condition */
.banner { background: url(path/to/image); }
}
You can set many steps like this. Just add another one, change the min-width and load different image to background.
So in your page you have to do following in CSS:
#media (min-width: 1320px){
.span8 { width:1178px; }
}
.name-logo, .banner { width: 50%; }
.banner img { width: 100%; height: 100% }
.name-logo img { width: auto; height: auto; }
.name-logo { float: left; }
.banner { float: right; }
Trick with responsive layout is to use percentage values not fixed pixel ones and do not use negative margins if possible.
I have my login.css here:
#contentContainer{
margin-top: 10%;
}
and here's the piece of my PHP file:
<div align="center" id="contentContainer">
<div id="Login_Cont"></div>
<div class="login_logo"></div>
</div>
I put the content of my site in a one big div, I called it contentContainer. Now, How can I fit the content of my site in any resolution, I've tried already the media screen tricks/css tricks but it doesn't work. Please help me.
So you would like the contentContainer to float in the middle of the screen?
Is it something like this you're after:
#contentContainer {
background-color: #ccc;
height: 300px;
left: 50%;
margin-left: -150px;
margin-top: -150px;
position:absolute;
top: 50%;
width: 300px;
}
You can give that container width in percentage like
#contentContainer{
width:100%;//likewise
margin:auto;//to center your div
}
or best use media queries
#media screen and (max-device-width : 320px)
{
}//likewise define for each screen resolution