CSS website fit to width of device - javascript

So, I am working on a web project, when I encountered a problem when viewing the website on, pretty much, any mobile device. The problem was that, when you first enter the page, the full width of the page would not be displayed, only a small portion of it. I am looking for a solution to correct this problem, without changing all of my code, or implementing a framework, such as bootstrap.
The domain is the-salon.uk if you would like to see the problem for yourself.
Thanks, all.
Harrison
How it appears on Desktop - Screenshot
How it appears on mobiles - Screenshot

Just add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
after the <html> tag. This will make sure your website covers the device's viewport.

You could fudge it by explicitly specifying the width in the meta viewport tag... eg:
<meta name="viewport" content="width=1000px, initial-scale=1.0">
To be perfectly clear, that won't make for a great user experience. It's quite bad in fact, but it will keep all of the content on the page. Users will have to pinch-zoom to use anything though.
Like the comments say, you should look into responsive design. It's really too broad a topic for a SO answer, but it involves using a combination of percentage based/flexible items and css media-queries (look it up) to change the layout of the page at certain screen widths.
Hope that helps somewhat! I'd slap in the change to the meta-viewport as a hot-fix since your site is already live, and then go about the process of learning how to make it responsive. I definitely don't advocate using that viewport trick long term.

If you want everything to fit on the screen, I highly suggest using percentages rather than pixels. Instead of width: 400px, I suggest:
width: 100%
This ensures that the block takes up a certain percentage regardless of which device you are running on.
I can't see your source code, so I can't give any specific feedback. Hope this helps!

Odds are you have width set to an absolute value, I would change this if you have it in the css:
width:{Amount}px
To something more like this
width:{Amount}%
This type of declaration is a relative value meaning it changes with either the size of the browser or the position/size of other elements. If it doesn't resize, odds are you have it set to an absolute value (using the px keyword).This might be useful for you
EDIT
Oop apparently someone said the exact thing as I was typing this up RIP, GG Knightsoul

Add this code will fix your problem.
#media (max-width: 520px) {
.menu { width: 100%;}
.menu li {
float: none
height: 32px;
width: auto;
padding: 0px 6px;
}
#greeting {
padding-right: 25px;
padding-left: 25px;
}
#banner {
background-repeat: no-repeat;
width: 100%;
height: 200px;
max-width: 800px;
background-size: contain;
background-position: center;
background-image: url(/Images/home_background.jpeg);
}
}

*{
box-sizing: border-box;
}
body{
height:100%;
width:100%;
margin:0;
}
<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />
Try this.
Hope this helps.

Related

Get Rid of White Space Under Footer On Full Screen Browser And Large (49 inch) Screens

Frankly I have seen and read so many posts on this topic to the point that I almost shied away from asking the question but none has covered the scope of or solved my problem so far.
I get white screen on this website only when I put the browser on full screen (press F11). The space is even worse on large screens such as 49 inch televisions if their browsers are also put to full screen mode. I am using blankslate theme and used elementor plugin to build the site so I dont have an "official" footer per say. How best can I get rid of this because it looks really ugly on huge screens. Solutions such as this one and the like but they dont work including setting the
height: 100vh; //100% /* in custom.css */
Okay a few things:
Your body has margin of 8px on it:
body {
margin: 0;
}
You want to put height: 100vh; on the inner container of the content. It also has margin-top: -1%; for some reason:
.elementor-element-9q9c7yv {
height: 100vh;
margin-top: 0;
}
This fixes everything except there is an empty div on the bottom that is adding 1px of white space to the footer, get rid of it:
elementor-container elementor-column-gap-no {
display: none;
}
There ya go :)
Try:
html, body {
height: 100%;
}
If that doesn't work, you could put this plus the above:
footer {
position: absolute;
bottom: 0px;
left: 0px;
}

Solution for image gallery

Ok, to start off, I'm sure out in the internet there is a good tutorial about this, but I can't even manage to "write down" a possible title for the problem, and I apologise for that.
I like a responsive and simple makeup:
<div class="gallery-container">
<img src="/your/image/url.jpg">
<img src="/your/image/url2.jpg">
<img src="/your/image/url3.jpg">
......
</div>
My problem is: I have different aspect ratio images to show off all with the 3:2 aspect ratio.
An easy solution would be to insert the images as a background to the a element with CSS, set it to be centred contained and then, with a simple JS script define a height to be 75% of the a width.
I used this solution before, but this time is not working for me: I need to dynamically insert the images with PHP.
How can I get a similar effect to the above explained CSS technique but with the images declared in the HTML?
UPDATE: something like this: http://jsfiddle.net/fF6GL/ - but I need the above makeup, this one would not work in that case
P.S. if possible, I would like a solution without using a JS library.
If you can put those linked images into a list, this might work:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Ok I got a solution that is working for me, a demo is available here: http://jsfiddle.net/fF6GL/3/
Essentially, I'm just adding the background image on the CSS directly on the HTML:
<div>
</div>
And this is the CSS:
div {
width: 90%;
margin: 0 auto;
}
div a {
display: block;
float: left;
width: 50%;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
For the height, I'm using a small clever trick here:
div a:before {
content: "";
padding-top: 75%;
display: block;
}
This won't work on IE, but sincerely, I don't care.

Image no longer responsive as put in table cell layout

I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:
<div id="mainContainer>
<div id="horizon">
<img src="url">
</div>
</div>
Here mainContainer ist set to display: table and horizon is set to display: table-cell.
Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)
see: http://jsfiddle.net/U8KcN/
EDIT:
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).
source: OP Comment
Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.
By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.
Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:
table {
table-layout: fixed;
}
Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.
How about dropping that "CSS-table" stuff and doing it a bit easier?
<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
<img src="URL">
</div>
At least, that’s how I would handle it...
EDIT:
Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:
<style>
.centerimg {
width:auto;
height:auto;
margin:25%;
text-align:center;
vertical-align:middle
}
</style>
...
<div class="centerimg">
<img src="#">
</div>
EDIT 2:
Replying to the related comment, here's the update to make the image fit it's parent proportionally:
If your image has a bigger width than height...
<style>
...
img{
max-width:100%;
height:auto
}
</style>
or, if your image has a smaller width than height...
<style>
...
img{
max-height:100%;
width:auto
}
</style>
EDIT 3:
Looking at your fiddle, I came up with this which works like you want it to work:
<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}
img{
width:auto;
height:100%;
}
</style>
I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/
EDIT 3:
As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.
You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:
<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>
Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.
If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.
Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:
http://jsfiddle.net/hHWy8/1/
HTML:
<span class="horizontal">
<span class="vertical">
<img src="url" />
</span>
</span>
CSS:
span {
display: inline-block;
}
span.horizontal {
text-align: center;
width: 100%;
}
span.vertical {
vertical-align: middle;
border: 1px solid black; /* put a border on container for display purposes */
line-height: 1000px; /* this sets the vertical height */
overflow: hidden;
white-space: nowrap;
}
span.vertical img {
height: 50px; /* set your image height (could be percent) */
width: 50px; /* set your image width (could be percent) */
}
span.vertical br {
display: none;
}
To resize your image you could use this css:
html,body,div,img{
height:100%;
}
img { width:100%}
It sets the html and body's height to 100%, this is needed so the height of your page takes all available space

How to make winJS app scrollable?

I am new to developing Windows 8 store apps, and I am in the process of creating my first one.
The app I am making is a note taking app. I only started the app yesterday, so it's still very basic, but I am having a problem with the scrolling. Here is a screen shot displaying the problem:
As you can see, when a certain number of notes are entered, they start overlapping the screen. What I need to do is make it so that when the notes a certain amount of pixels from the side of the display, it makes it scroll-able.
The divs that the notes are contained in are created as the note is written. The notes also auto change size depending on the amount of text entered.
Does anyone know how I would make it so that they scroll to the left and right instead of overlapping?
EDIT:
Here is the CSS:
body {
overflow-x:auto;
}
#textInput {
padding:20px;
float:left;
margin-top: 20px;
margin-left: 20px;
position:fixed;
}
#noteInput {
display:block;
border-width:5px;
border-color:purple;
box-shadow: 5px 5px 5px;
}
#titleInput {
border-width:5px;
border-color:purple;
width:285px;
box-shadow: 5px 5px 5px;
}
#noteSubmit {
width:295px;
}
#headers {
margin-left:100px;
margin-top:80px;
}
#hr {
margin-right: 40px;
margin-left: 40px;
}
#noteContainer {
float:left;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
margin-left:400px;
}
I haven't really bothered with the UI and design much yet, as I want to get all the background stuff like javascript, jquery, and azure working first.
I am only doing this app as a project for practice, for the 70-481 and 70-482 exams I have in two months, so its never going to be in the store or anything.
Thanks for your help
Cheers
Corey
I strongly recommend using a WinJS.UI.ListView control instead of writing the div elements yourself.
That way you'll not only get a look & feel to your application that's consistent with what the user expects from a Windows 8 Modern UI app but it will also take care of the scrolling and management of the DOM elements for you.
See this tutorial on how to create and style a ListView control.
I agree with #ma_il, but if you do want to add scrolling functionality to custom elements, you simple wrap those elements in a div and add some CSS properties to that div...
overflow-x: auto; /* to scroll horizontally /
overflow-y: auto; / to scroll vertically /
overflow: auto; / to scroll in both directions */
If the contents of that div are wider (or taller or both) than the screen then your screen will automatically become scrolling and touch will be supported.

how do i re-position fixed Header & Footer?

I have got some issues when using fixed Header & Footer,
But some suggest on me to use Position: Absolute instead of Fixed
and re-position Header and footer when scroll using JavaScript Code,
Does any one know how to do this?
Or this issue faced him.
Any suggestion would be helpful.
Best Regards.
Ahmed, I just came over here from the other thread we had been discussing. Your question isn't clear enough for the other folks to answer. Your question should include the fact that you need to trigger the javascript function to reposition on a specific event.
One way you could do this is this:
Change the elments to absolute position instead of fixed. Don't use fixed at all. Then make the javacript function for positioning elements fire every time the browser window scrolls or finishes scrolling. By doing it this way, the elements will always be moved into view after user finishes scrolling. They will actually pop into view which will look ugly. To make them smoothly move into view, you'll have to extend it further by using css3 transistions OR interpolating the position gradually with javascript. On iOS5 and iOS6, you should be able to use css3 transitions just fine. They would be VERY easy to implement. CSS3 transitions make javascript controlled animations a piece of cake.
The hard part will be implementing the javascript to compute the element positions and then fire the event after the browser finishes scrolling.
Hopefully some other folks can chime in if I've got the right direction.
Vote me up, bro. :)
See if the code below helps (notice how the margin adjustments use negative values that are half the size of the div that is being positioned):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#text_center {
text-align: center;
width: 200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-20px;
}
#text_bottom {
text-align: center;
width: 200px;
position:absolute;
left:50%;
bottom:1%;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="text_center">Text 1</div>
<div id="text_bottom">Text 2</div>
</body>
</html>

Categories