This question has been asked before here and here but I was unable to find a suitable answer
I don't want to change the default view-port because everything else other than my footer scale beautifully. Strangely, I have a fixed position menu <div> that has always accepted the width: 100% value.
I have tried width: 100%, width: 100vw, and width: inherit. For some reason, a couple full-width images on my site wouldn't work with width: 100%, but took on the correct width when I used width: inherit.
Is there a solution in which I don't have to change the view-port size that I haven't thought of?
My menu <div> which works correctly:
#navbar {
z-index: 5;
width: 100%;
padding: 10px 0px 10px 25px;
background-color: #1391cb;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #3a3a3a;
}
My images which I got to correctly scale:
#media only screen and (max-device-width: 480px) {
#main-content, #main-content-overlay {
width: inherit;
}
}
In addition, certain pages of my site work perfectly on mobile. There is no discernible pattern to which do, and which don't. Some of the pages that work have more content than the height of the device, and others don't. None of my pages exceed the width of the view-port in any way, shape, or form.
The only case I've seen width:100% being ignored, is if the parent container(s) do not have a width set.
Related
I'm having a problem with the mobile version of a responsive website I'm building.
See that green "info" DIV that appears at the top left corner of the full-screen version of the site?
I need it to move down and live at the bottom of the screen - right above the footer DIV that has all the links - on the mobile version of the site.
Here's the full-screen version:
Here's the Mobile version:
Here's my CSS for the regular full-screen layout:
#productHoverDIV {
z-index: 20;
position: absolute;
top: 10px;
left: 10px;
width: 300px;
padding: 8px;
}
And here's the mobile rule:
#media screen and (max-width: 414px) {
#productHoverDIV {
z-index: 20;
position: absolute;
bottom: 40px; // that's the height of the FOOTER DIV below it
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
The issue is that even though I'm telling the productHoverDIV to be 40px from the bottom on the mobile layout, it still keeps it's top:10px value from the regular CSS rule, and ends up covering almost the entire screen.
So I need to somehow cancel-out the top rule - or override it with a different value, except
I have no idea know what value to put from the top cause every mobile device has a different height.
How do I resolve this?
You should change it back to its default value, which is auto.
Removed the duplicated z-index and position values.
#media screen and (max-width: 414px) {
#productHoverDIV {
top: auto;
bottom: 40px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
I am working on a website which is 1920-1080px but It doesn't fit the screen as it is too big. I have removed the margin and padding and it works but it is too big to fit the screen. there is white space on the right side of the page with no scrollbar. If I scale it to fit, It has a scroll bar and so it does not fit the screen
#Home_Page {
position: absolute;
box-sizing: border-box;
background: #E5E5E5;
width: 1920px;
height: 1080px;
background-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0;
padding: 0;
--web-view-name: Home Page;
--web-view-id: Home_Page;
--web-scale-to-fit: true;
--web-scale-on-resize: true;
--web-refresh-for-changes: true;
--web-enable-deep-linking: true;
}
I expected it to be full screen and scrollable.
I'm not sure I understand your problem here, but if you want your "Home_Page" div to be full screen, you should consider the vh and vw units, such as:
#Home_Page{
width: 100vw;
height: 100vh;
…
100vw being 100% of your viewport width, it dynamically adapt to the width of the browser's viewport width.
If you want to keep a minimal width of 1366px, then:
#Home_Page{
width: 100vw;
min-width: 1366px;
height: 100vh;
…
You can't fit a web page with static sizes everywhere becuase different users have different monitors/displays. Even if you achieved it in some way, the image would probably be a bit blury after upscaling it.
As DimNC pointed out earlier, you should consider creating a responsive page or set your element's height to 100vh and width to 100vw.
vh comes from vierport height and
vw from viewport width.
That way your page will "adapt" to various screen and browser sizes dynamically.
#Home_Page {
height: 100vh;
width: 100vw;
}
*
{
margin: 0px;
padding: 0px;
}
body {
background-color: #FFAF0A;
}
#wrapper {
width: 100%;
height: 1000px;
}
#header {
background-color: #222222;
height: 120px;
width: 100%;
}
#body {
width: 100%;
height: 700px;
}
#leftNav {
float: left;
width: 15%;
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 85%;
float: right;
height: 700px;
background-color: white;
}
#footer {
background-color: #222222;
height: 100px;
}
Hello all, this is my layout for my web page. Is this responsive? If not how can I make it responsive. When it comes to graphics what do i do with pixels? convert them to percentages?
Thank you in advance.
'Responsiveness' has more things to consider than making heights and widths in % of the total available. It should include css #media queries, should consider resized images for different screen widths, should also consider image layouts and dimensions for device positions like ipad vertical or horizontal.
This 'responsive' term is still not clearly defined and I can say the stylesheet you wrote above is not responsive.
EDIT
Since you are doing this in dreamweaver, it has all things you need to do for a responsive web scroll. Just follow to create responsive web page while starting a new project. Also, dreamweaver has really good interface in the bottom of the editor which has tabs of desktop, mobile device, and a tabular device icons which show how your code looks in each type of device. You should also have flexibility of jquery-mobile in it, because it contains all those things bundled, and more interestingly, it writes plain CSS for your wysiwyg editing. (Though it includes many stylesheets, beyond you feel their requirement).
You could also use css3 #media queries to include or exclude items depending on the size of you page.
A good way to experiment would be to shrink or expand your browser on a desktop of laptop computer.
For more on this, see..
Css Media queries
The others are correct about % though. When you use declare % rather that static px dimensions, you are setting your elements to adapt to a certain % of their parent elements.
Still your css will behave like liquid layout. It will break on very large screen. As you wish to create the website on 960px. So you have to give the css for wrapper like below:
#wrapper {
width: 960px;
max-width:100%;
height: 1000px;
}
due to max-width:100% your wrapper will automatically behave liquid format in small screens. Other child elements you can use % value as well.
Now there is a question how to convert fix px value to % or em.
So here is the simple rule to do this.
for em value: child width / parent width = em
For % value: (child width / parent width)x100 = %
Example:
#wrapper width is: 960px;
#leftNav width is: 200px;
#content width is: 750px;
Now for per you have to do follow the above mention rule:
#leftNav {
float: left;
width: 20.83333333333333%; /* (200/960)x100 */
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 78.125%; /* (750/960)x100 */
float: right;
height: 700px;
background-color: white;
}
you can use this rule to define the fonts size in percent or em .
I have the following requirements for some CSS I need to write. I have an image that needs to fit into an area, and its size needs to stay proportional.
I want it to have a max size of 25px width and 25px height. But if it is bigger than 25px width or 25px height, it needs to be resized to fit into those dimensions keeping its proportions.
Right now, I have the following:
.imageResizeAccountInfo
{
height: auto;
width: auto;
max-width: 25px;
overflow: hidden;
}
Is this the correct way to achieve what I am looking to do?
You can use in css:
background-image: url("path/image.jpg")
background-size: contain;
This will always give you an image that is 25px wide with a height that is proportional to any resizing that was done. If you want to programmatically decide if the height or width needs to be resized, you could do that with javascript.
Use this guide for maintaining aspect ratios. I use it all the time for pictures and videos (makes youtube videos super easy to resize).
Note: This would only work if you know the aspect ratio of the image beforehand, or you add some logic to determine it. If you want something to handle any image that comes in without knowing the dimensions, this won't work.
With similar HTML
<div class='imageResizeAccountInfo'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
Add this CSS
.imageResizeAccountInfo{
position: relative;
width: 100%;
}
.imageResizeAccountInfo:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
And some additional CSS for customization
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
May I suggest using:
background-image: url('yourimage.jpg');
&
background-size: contain;
Which will contain the photo to it's parent's height & width.
if you only need to resize an image at most at 25x25px and keep aspect ratio you only need to set
img {
max-width: 25px;
max-height: 25px;
}
http://jsfiddle.net/3rfXa/
there are three cases, a squared image will be resized to 25x25, a portrait image will be resized to somethingx25 and a landscape image will be resized to 25xsomething (with something less than or equal to 25)
maybe i don't really understand the question, cause all the other answers seems to be too complicated for a resize
note that max-width and max-height are not supported on older ie versions
I am having issues making the sprite I have resize, when I resize browser window.
The remiander of the template is repnsive including the Nav Menu.
The sprite remains fixed and sticks out of the page when resizing.
How would I make it size like the rest of the template (removing the width scroll bars)
If you just remove the sprite everything displays correctly.
I have created a Fiddle but its not showing the when I click results.
I have uploaded the page to here:
Test Page
Thank you.
Perfect Solution I have Got U can Use
I have used This solution
And It works Fine on all browser except Android Browser
.playerSp
{
display: block;
background: url(blue_sprite.png) no-repeat;
}
.next-button
{
background-position: -83px -6px;
width: 41px;
height: 46px;
}
var abc=(screen.availHeight+screen.availWidth);
$( window ).resize(function() {
var aaa=($(document).height()+$(document).width());
scale=abc/aaa;
$('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
});
</script>
So I was stuck with the same question and noticed the answer was not yet given here.
Here is the answer:
I've managed to make my sprite fully responsive. For this I didn't use any slicing (photoshop) or javascript. Also notice how the sprites are positioned absolute and yet still responsive according the background.
For a better understanding of this process, please see the following link: http://brianjohnsondesign.com/unlisted/demos/responsivesprite/
Also see my link in order to see how it looks on my website: http://demo.chilipress.com/epic3/
Should my link not work anymore, try the first link above.
See here the CSS and HTML
#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
HTML
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
your sprites have fixed height: 632px; & width: 1163px; if you want them to resize youshould add at least a min-width and a min-heigth properties
example, if you want your sprites resize to a minimum of 10 px lets say you would add those properties to your code
#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}
you can also use media queries to change the image acording to screen width or height: example:
#media screen and (max-width: 980px) {
#sprite-main-v2 {
height: 100 px; /*new size*/
width: 100 px; /*new size, value just as example*/
background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
}
}
Shrink your sprite to a smaller set size by adjusting its background-position and background-size css properties in a media query.
background-position: 0 -135px;
background-size: 170px 190px;
Those number are an example, you have to play with them to get it to line up with your sprite, which can be confusing as the image can disappear. Recommend adjusting them bit by bit in developer tools.
You can also use percentages to allow for a more responsive resizing, although this can get tricky too.
Note, background-size doesn't work on IE8 but neither do media queries....