html,html5,css3,viewport,meta , Meta viewport doesn't work for my website
Meta viewport doesn't work for my website
Question:
Tag: html,html5,css3,viewport,meta
What I should do to this page: to work right in mobile. I have tried meta viewport but It doesn't work. You can find the page here:
and html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="english.css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<header class="mainHeader">
<ul>
<li><a href="#">Magazine</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section class="wr">
<img src="images/right.png" class="right">
<img src="images/left.png" class="left">
<section class="wrapper">
<div class="container">
<h1><a href="#" class="name">Photographer</a></h1>
<h1><a href="#" class="title">Story</a></h1>
<p><a href="#" class="lead">DescriptionDescriptionDescription</a></p>
</div>
</section>
</section>
</body>
</html>
and css:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: black;
}
body{
color: rgba( 255, 255, 255, 0.9 );
font-family: Helvetica, sans-serif;
background-image: url("images/14thcover.jpg") ;
background-size: 100%;
background-repeat: no-repeat;
}
a:hover{
color: black;
}
.mainHeader {
float: right;
font-size: 1.3em;
margin-right: 0.8em;
margin-top: 2em;
line-height: 1.2;
}
ul {
list-style-type: none;
}
.mainHeader a{
color: rgba(255,255,255,0.9)
}
.mainHeader a:hover {
color: rgba(255,255,255,0.7)
}
.wr {
width: 75%;
height:60%;
min-height: 65%;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.right {
position: absolute;
top: 49%;
right: 0;
}
.left {
position: absolute;
top: 49%;
left: 0;
}
.wrapper {
width: 80%;
height:auto;
background-color: white;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.wrapper ul li{
list-style-type: none;
display: inline;
font-size: 2em;
}
.title {
color: red;
}
.name, .lead {
color: black;
}
.lead {
font-size: 1.3em;
}
.container {
width: auto;
top: 35%;
left: 50%;
position: absolute;
overflow: auto;
transform: translate(-50%, -50%);
direction: rtl;
font-weight: 80;
}
.container h1 {
display: inline;
font-weight: 100;
font-size: 2em;
margin-bottom: 1em;
}
.container p {
margin-top: 1em;
text-decoration: none;
}
Answer:
That works as you have specified in your CSS. The problem is that these specific widths do not fit in smaller resolutions on the device screen without overlapping. You must specify:
@media (max-with: 768px) {
.mainHeader {
float: none;
}
}
You can reduce sizes and font sizes to still have the same look as in greater resolutions, but text become not readable or clickable
Related:
javascript,html,css
I would like to select n elements from the element recieving the hover event. Is this possible in CSS? E.g. In the example below, could I write CSS to select the next 2 items from the item reciving the hover event? <div class="row"> <div class="col-md-1 item"></div> <div class="col-md-1 item"></div> <div...
javascript,jquery,css,html5,twitter-bootstrap
I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...
html,css,css-shapes
This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....
html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...
javascript,jquery,html
I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...
jquery,html5,canvas
I'm trying to draw text (HTML5 canvas) depending on what option is selected in a select element. It works correctly until there's 2 set of text that appears at the same place. It seems like the clearRect function is the issue. The text won't be redrawn over that cleared space....
javascript,jquery,html,seo,cross-platform
I plan to: $('#main.sidecontent').load('/sidecontent.html'); and insert: <div class="sidecontent" id="main"></div> a div on several html pages since the content of this div is the same and I try to straighten my workflow, basically avoiding editing every single html page when this content div changes. My questions: Is this method recommended for...
javascript,jquery,html,scroll
I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...
jquery,html,css,drop-down-menu
I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...
javascript,html,event-handling
So, my goal is this: if the checkbox is checked by the user, do something (let's say just an alert). Here's my code, that is not working: function validate() { if (document.getElementById('LetterNeed').checked) { alert("checked"); } else { alert("You didn't check it! Let me check it for you."); } } <input...
html5,css3,media-queries
I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...
javascript,html
I am trying to get Index no of a row when hyperlink is clicked i am passing some other data too from this tag <a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"> <i class="fa fa-edit"></i> </a> I tried $('table#DoctorVisit tr#' + RowCount).index() $('table#DoctorVisit tr#' + RowCount).closest.index() But both are not working...
html,css
Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...
javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...
html,css,css3
Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...
html,css,wordpress
I've tried a bunch of techniques to solve this. I've used float (left/right) and played with positioning (absolute & relative). None worked. Basically my navigation keeps moving when the the text decoration (font-weight: bold; in this case) is applied. I'm new to CSS and this is my first header- so...
javascript,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...