Context: http://tomtam.net
Example: http://getbootstrap.com/examples/navbar-fixed-top/
My navbar is tiny mobile. Also how can I center the image ? Thank you
You're missing viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Place it before <title> tag.
Also, you should place your "row" div inside a div with "container" class.
Related
I need the banner on my website to center and resize according to the screen size the website is being viewed on (including mobile). I need it to center as in the actual center of the div is in the center of the screen, even if the div itself is wider than the screen it's being viewed on - so the left and right sides of it (/the image contained inside) are cropped/hidden off-screen.
Here's a page with the banner on as it is currently:
http://keshiheads.co.uk/test
Full size of banner image for reference: http://keshiheads.co.uk/Background.png
<head>
<meta name="viewport" content="width=100%, initial-scale=1, user-scalable=yes">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="overflow-x:hidden;">
<div style="position:absolute;top:0;">
<div style="position:absolute;top:0;left:0;"><img src="Background.png" style="height:140px;"/></div>
If you use bootstrap, you can put the banner in a "container" class which will center your banner and then you can use css cut off points to make it responsive.
So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. So the HTML of the page looks like this:
https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
Portfolio
Sobre
Loja
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. The size is important, and the current size is the one I want. Also, notice that there is a text overlaying the image. That text must stay there. I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image.
I tried my luck with some CSS but it din't go very far. You guys can take a look:
https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all:
https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning.
You can use wowslider. Wowslider . Just download the software. You can easily add any picture and also any kind of sliding transformation.
I'm writing my first website using Bootstrap and CSS style sheets with VS2015 and it all lines up perfectly when in full max screen. However, when I start to reduce the size of the screen, instead of the scroll bars taking over, the components move and eventually all fall out of line.
Below is how I have set out my html screen
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Bootstrap-->
<link rel="stylesheet" href="Content/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
</head>
How can I set my components to fixed and just allow the scrolling whatever size of the browser?
I have spent quite a bit of time browsing on this and I've experimented with #media and other CSS changes but nothing works.
If I understand correctly, you are looking for this (which I don't recommend):
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Here is an article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
You can also try placing min-width onto your outermost container, like this:
#your-main-page-wrapper-around-everything { min-width: 1200px; }
Bootstrap CSS is intended to be responsive, so your other option is to study their grid css: http://getbootstrap.com/css/#grid
This would give you control over how the columns will wrap, so you won't have to prevent user scaling.
I made a very simple site www.abasi.info/viewport
Consists out of:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img alt="18" src="18.gif" style="height:55px; width:550px;"></p>
</body>
</html>
The numbers should go until 18. But with my Android Phone (Version 2.3.6) the viewport doesn't adjust. It is zoomed in to much. I just had this one picture in the site (nothing else). And if the above viewport would work it would show all the numbers in the pictures until 18. It is very strange.
You need to make the Image 100% width and auto height, so the ratio won't mess up.
example -
img{
width:100%;
height:auto;
}
http://jsfiddle.net/1n9jnaxw/
you also can use max-width, but make sure you define the image dimensions first.
To limit the viewport to 550px you will have to change it to-
<meta name="viewport" content="width=550, maximum-scale=1, user-scalable=no">
I have coded a html page as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body bgcolor="#f2f2f2">
<div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
<div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
Hello world
</div> <!-- end container 2 -->
</div> <!-- end main container -->
</body>
</html>
The width of the div is 1000px and it is center aligned using the property margin:0px auto;
When I view this in the desktop browser, it is fine. But in a mobile browser(iPhone Safari), I get an unwanted horizontal scroll, also the entire page floats hrizontally and diagonally.
Why does this happen?
How can I fix this issue which is specific to iPhone/iPad browser. I have not tested in other mobiles.
What are the code I need to put in to make a mobile browser display a webpage(designed for desktop browser) properly?
Please suggest.
Thanks
Thank you for the suggestions provided.
A slight modification solved the issue.
<meta name="viewport" content="width=1000" />
This worked.
Try to add this line to head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=1000, initial-scale=1" />
Try the above, instead. The content width is set to match that of the container div, and the max scale is removed to allow users to zoom in.