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
Related
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;
}
The divs of the bellow web page shift out of alignment when the window is made too narrow, or the image thumbnails are clicked. Is there a way to prevent this from happening?
http://nosgoth.net/NR-Test/ff_scroll-test3.html
Note that the "frametop" div and "framebtm" div contain images inserted into the html, while the "text", "content", and "container" divs use background images. Thanks.
So, your issue was that your background-images were in a fixed and centered position relating to the viewport. By themselves neither of these are an issue, but together they try to remain in a fixed position while being centered to the screen. It causes issues when the screen is smaller than the image itself. Unfortunately if you remove one or the other, it breaks your expected output.
One way to fix it would be to use media queries (like Trix and afelixj) suggest. Another way is to redo your code and not use background-image. I took this approach.
Instead of having each piece of your frame be built upon elements being used for content, I moved them down into their own div called #frame. With a bit of fixed positioning your original concept remains unscathed. However, it is not responsive (though you could make it fluid with percentages and viewport units easily enough).
Here's a striped down concept of the way I rewrote it:
CSS:
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides,
#frame .framebtm,
#frame .side_decor {
display: block;
position: fixed;
left: 50%;
transform: translate(-50%);
}
#frame .side_decor {
top: 50%;
transform: translate(-50%, -50%);
}
#frame .scroll_bg,
#frame .frame_sides,
#frame .side_decor {
z-index: -5;
}
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides {
top: 0;
}
#frame .framebtm {
bottom: 0;
}
HTML:
<div class="content">...</div>
<div id="frame">
<img class="scroll_bg" src="http://nosgoth.net/NR-Test/images/scroll_bg.png" alt="" />
<img class="frame_sides" src="http://nosgoth.net/NR-Test/images/frame_sides.png" alt="" />
<img class="side_decor" src="http://nosgoth.net/NR-Test/images/side_decor.png" alt="" />
<img class="frametop" src="http://nosgoth.net/NR-Test/images/frametop.png" alt="" />
<img class="framebtm" src="http://nosgoth.net/NR-Test/images/framebtm.png" alt="" />
</div>
I placed the frame at the bottom (so it would be on top of everything else) and moved each portion into place with fixed positioning. The scroll background, sidebars, and side decorations were given a negative z-index so that all content would be on top of it and remain clickable.
After that it was just making everything fit. I played around a bit with your values, but for the most part the rest of the code is yours (body and html are the only other places I made modifications).
The whole thing still moves when the images are clicked at the bottom, but I have a suspicion that that is fancybox's issue.
Here's a codepen of the final result.
Thats because this div
<div class="text"></div>
has a fixed-width background-image:
.text {
background-image: url(images/side_decor.png);
}
If you want to make it properly in different browser window sizes, you may consider having multiple copies of side_decor.png and assign theme for different broswer widthslike this:
#media screen and (max-width: 400px){
.text {
background-image: url(images/side_decor_400.png);
}
}
#media screen and (min-width: 400px) and (max-width: 800px){
.text {
background-image: url(images/side_decor_800.png);
}
}
For a quick fix, please try appending the below styles
body{
max-width: 814px;
width: auto;
}
.frametop, .framebtm {
left: 50%;
transform: translateX(-50%);
}
#media (max-width: 680px){
body{
overflow-x: hidden;
}
img{
height: auto;
max-width: 100%;
}
.text{
padding: 0 20px;
}
}
I have two horrizontal tab images. I am moving my web application to display it in mobile.So I used responsive web design. I want the two horrizntal images to display inline. But when the screen width decreases, the second image is moving down. The image shrinks after moving down. I want the images shrink before moving down and it should not move down.CSS and HTML is given below.Please help.
.image-wrapper {
max-width: 100%;
height: auto;
display: inline-block;
}
<figure>
<img class="image-wrapper" src="~/Images/Q.gif" />
<img class="image-wrapper" src="~/Images/H.gif" />
</figure>
You can achieve that using Media query. Try something like this:
#media (max-width : 320px) {
.image-wrapper {
width: 100%;
height: auto;
display: block;
}
}
#media (min-width : 320px) {
.image-wrapper {
width: 50%;
height: auto;
display: inline-block;
}
}
As seen from the code, the tipping point beyond which the images will flow one below the other is when the available width is less than 480px.
try using media queries, they will only apply to smaller screens
#media only screen and (max-width : 760px) {
img{
width: 100%;
}
}
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 a CSS problem. I have an image that is 1024x500 pixels. Now the problem is, whenever the browser window/viewport changes width below the width of the image(1024px), the image starts to get cut off. Now as you can see, I set the container width to 100% when the viewport size goes below 1024px, and it does resize proportionally, but the sides of my image get cut off more and more as the browser resizes(smaller).
Could anyone help me get my image to resize dynamically pixel for pixel (without losing any of the original picture - no cut offs)?
Check out my webpage and resize the browser window to see what I mean. Pay attention to the sides of the images getting cut away...
HTML: Note my Original image is 1024x500
<div class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
</li>
</ul>
</div>
CSS:
The normal CSS for large screens
.ei-slider{
position: relative;
width: 1024px;
height: 500px;
margin: 0 auto;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
For when the Browser window goes below the image width: 1024px:
#media screen and (max-width : 1023px){
.ei-slider{
width: 100%;
}
}
For smaller screens when my images are cut off: Note my Original image is 1024x500
#media screen and (max-width: 930px) and (min-width : 831px){
.ei-slider{
width: 100%;
}
.ei-slider-thumbs li a{
font-size: 11px;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: visible;
height: 100%;
width: 100%;
}
.ei-slider-large li img{ /*HERE IS MY PROBLEM*/
width: 930px;
height: 454px;
}
}
Thank you!
you use:
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
This will make whatever you assign the css to resize dynamically to fit its container based on the max-width: 100% statement. If you would like it differently, change the max width statement accordingly.
I have a simple solution for that. Just give the width parameter in terms of view-port percentage.
Syntax :
width: <Percentage>vw;
Example :
<img src="Resources/Head.png" alt="" style="width: 100vw; height: 85px">
Here, the height of the image is fixed but the width will be resized to 100% of the view-port, whatever its size may be.
Hope this helps :)
I had the same problem because I'm using the same jquery plugin (ie-slider). I found out that the image is passed additional (inline) styles from the Javascript code and in fact it is just shifted-left and not actually cut off. The code passes dynamic values to the tag which are got from the image itself at the time of re/load in a particular viewport width. The author uses this in the .js file.
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src')); //gets the dimensions from the image
He then gives the image a margin-left like so
$img.css({marginLeft: imgDim.left}); //assigns a new margin-left, overrides any value set for this property in the .css file because it's inline
When the viewport width gets smaller this is always a negative value. The work around is to set
$img.css({marginLeft: 0});
It worked fine for me after, with no arising issues from the change. Good luck.