When resolution lovers my background images are collapses. I tried width 100% but not worked. Here is my page and screenshot of problem.
What should I do to prevent this? a CSS2 way?
add the following class to your div id="navigation">
#navigation {
min-width: 1024px;
}
Do you mean stack down when device width is changing,
use css #media query and set diff percentage width to the container.
Do you want to make the website responsive, a better way is to use a grid system to
achieve it. such as bootstrap3 , jquery-mobile etc.
They wrote the media query for you by default. javascript also can trigger responsive
but it's heavier than pure css.
Because your site isn't responsive (Seriously? This is 2014!) You need to give the body a minimum width large enough to accommodate your content:
body {
min-width: 1030px;
}
Related
I need help with my transformicon I got from [here][1].
It stays locked to a certain size even after doing things like "width:..px", etc. How would I resize this?
You can test it out at [my site][2], just log in using the username/password 22/22.
Thanks in advance!
Try to add width:100% for the image class, it will fit automatically the width of the screen.
Given below is img-resonsive style from twitter bootstrap which should make your image responsive to screen size. Additionally, you may use media queries for computer screen and set some different max-width for larger display.
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
I have a problem when loading the mockup of my project on an iPhone.
The problem is that on my mobile device, most 100% containers seem to have some kind of a right margin or padding, which leads to content crash.
I really think that probably this is due to "viewport" stuff, which I don't know for now, but anyway, take a look.
when seen your screenshot, Your code is up to date, when I put my image in your code then it's working fine, so you can check your image width and check css
check with this #0a1a19 url("../img/img2.png") no-repeat scroll center center / 100% 100%;
If you want to make responsive then use bootstrap and you can get from here....Bootstrap
But you are used custom css so you need to use media query for different layouts like, tablet, mobile, etc...
and one more thing if you not getting perfect layout in your mobile view then must check your media query for mobile view.
Note: always use % (not px) to give the width of any image.
.header__inner has fixed width, change width to 100% and remove padding for mobile devices:
#media <params go here> {
.header__inner, .header__inner_mod {
width: 100%;
padding: 0;
}
}
Codepen
Hi I'm trying to create a Responsive Email Template.
I can't make the background images responsive.
Here is a sample of the images code:
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
Basically We have the following images that I am having a hard time making fluid (responsive)
-logo (a#learn-more)
-banner image (.banner-img)
-learn more button (a#learn-more)
-image1 and image2
I have my demo here: http://jsfiddle.net/nLxjU/3/
Hope you can edit the code to see what my issue why I cant make them responsive.
I'm really stuck here.
You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.
Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.
Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).
Take a look at the standards guide (html/css) at http://www.emailology.org/.
You can improve with the following, but as #Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.
You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/
As for making the best of what you've got so far:
Your .divider and .banner-img elements were set to 600px wide.
Set them as 100%.
Don't have the banner as a background image.
Size your .lpanel and .rpanel images as 100% of the parent's
width.
Demo: http://jsfiddle.net/nLxjU/
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.
Here is a fiddle.
There is a standart trick with display:block; and max-width:100%; for responsive images:
img {
display: block;
max-width: 100%;
}
If I resize the width of the container, my image fits this width and also automatically resizes it's own height. This is very great image behavior! Also it doesn't use Javascript.
So, is it possible to do the same trick by resizing the height of the container? I want this image to fit containers height and also automatically resize it's own width proportionally. Of course, without any Javascript, just CSS or any experimental CSS3 features (I know how to do it with Javascript, really).
Add
max-height: 100%;
Also, try not to work with tables - they behave (more) unpredictably than other display types.
See here a most basic example.
EDIT: Couldn't find a way to do this without JS. I have put two methods for you in here - both could be used easily (I've used jQuery, but you don't have to). If that doesn't suffice, than good luck.