I have been developing a largish single page application that will be running on a local lan - ie not open to the public. That has to support the Chrome browser and iPads.
I've got large sections working on Chrome, but I ran across a problem with an iPad with the following section (this full app is made of web components - I've tried to make a fairly minimal test case.
In the scenario - in Chrome (78) the two date input fields are positioned at the top of a "menu card" in the second quarter in - below that is 16 buttons in a 4 x 4 grid.
The problem is - the same page in Safari (on my Mac (v13.0.3) and on my iPad - running IOS 13.1.3) displays all the components of the grid one over the other. There is a small difference between the Mac, and the iPad. On the latter the dates fields appear to actually be taller than the rest, whereas on the Mac the are entirely hidden.
I've searched for differences between chrome and safari and I can not find any.
Have I got the syntax of the CSS wrong? and then Chrome accepts it and Safari doesn't?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Grid Issue</title>
<base href="/concepts/">
<link rel="shortcut icon" sizes="32x32" href="../images/pas-icon-32.png">
<style>
html {
background: #ffffff;
}
body {
margin: 0;
min-height: 100vh;
font-family: sans-serif;
line-height: 1.5;
letter-spacing: 0.1em;
background-color: #fafafa;
color: #333;
}
</style>
</head>
<body>
<style>
:root {
--pas-button-menu-height: 70px;
--pas-button-menu-width: 225px;
}
.menu-card {
grid-template-rows: auto repeat(auto-fit, minmax(var(--pas-menu-button-height), max-content));
}
.three {
grid-template-columns: repeat(4,var(--pas-menu-button-width));
grid-template-areas:
". selector . ."
"covstat covstatnotx surgstat treat"
"enqstats embassy notreat surgpay"
"surgnopre prebook pricebreak bookstats"
"bookfirst bookclinic bookappt bookdet";
}
.selectors {
display: flex;
flex-direction: column;
}
.three .selectors {
grid-area: selector;
}
#covstat_portrait {
grid-area: covstat;
}
#covstatnotx_portrait {
grid-area: covstatnotx;
}
#surgstat_portrait {
grid-area:surgstat;
}
#treat {
grid-area: treat;
}
#enqstats {
grid-area: enqstats;
}
#embassy {
grid-area: embassy;
}
#notreat {
grid-area: notreat;
}
#surgpay {
grid-area: surgpay
}
#surgnopre {
grid-area: surgnopre;
}
#prebook {
grid-area: prebook;
}
#pricebreak {
grid-area: pricebreak;
}
#bookstats {
grid-area: bookstats;
}
#bookfirst {
grid-area: bookfirst;
}
#bookclinic {
grid-area: bookclinic;
}
#bookappt {
grid-area: bookappt;
}
#bookdet {
grid-area: bookdet;
}
section.menu-container {
display: flex;
flex-direction: column;
align-items: center;
}
section.menu-container > .menu-card {
margin: 40px 0 20px 0;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 38px -2px rgba(0,0,0,0.5);
background-color: white;
display: grid;
grid-gap: 30px;
}
</style>
<section class="menu-container">
<div class="menu-card three">
<div class="selectors">
<input id="startdate" type="date" label="Start Date" .value="1/11/2019"></input>
<input id="enddate" type="date"label="End Date" .value="30/11/2019" ></input>
</div>
<button id="covstat_portrait" >Conversion Statistics</button>
<button id="covstatnotx_portrait">Conversion Statistics (inc No Tx)</button>
<button id="surgstat_portrait">Surgery Statistics</button>
<button id="treat" >Treatments By Surgeon/Clinic</button>
<button id="enqstats">Enquiry and New Patient Stats</button>
<button id="embassy">Special Embassy Patients</button>
<button id="notreat">No Treatment/Not Suitable By Clinic</button>
<button id="bookclinic">Bookings By Clinic</button>
<button id="bookstats">Bookings Summary</button>
<button id="surgnopre">Surgery Booked with no Pre Op Assess done</button>
<button id="prebook">Pre Op Booking Analysis</button>
<button id="bookfirst">Bookings By Date First Booked</button>
<button id="bookappt">Bookings By Appointment Date</button>
<button id="bookdet">Booking By Appointment Date (Detail)</button>
<button id="pricebreak">Price Break Analysis</button>
<button id="surgpay">Surgeon Payments</button>
</div>
</section>
</body>
</html>
I came across this solution by chance. It seems to work
In my html the <metadata name="viewport" ... I should add shrink-to-fit=no
So the whole thing becomes
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I found the solution in this article https://bitsofco.de/ios-safari-and-shrink-to-fit/
Related
I am working on a project and i am facing a problem with the navigation section. I am making a navigation bar in which i need an image in the background and in front I want to add div containing links & buttons on that image.
Here is the HTML & CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
font-size: 62.5%;
}
body {
font-family: "Roboto", Courier, monospace;
}
.page-content {
width: 120rem;
margin: 0 auto;
}
.nav-section {
position: relative;
}
.banner-img {
width: 100%;
}
.nav-link-container {
background-color: wheat;
display: flex;
justify-content: space-between;
padding: 1.6rem;
position: absolute;
top: 76%;
left: 10.9%;
}
.nav-link-container ul {
font-size: 1.6rem;
list-style: none;
display: flex;
gap: 4.8rem;
}
.nav-link-container ul a {
text-decoration: none;
}
.nav-btn-container {
display: flex;
gap: 4.8rem;
}
.header-section {
background-color: bisque;
}
.header-section h4 {
font-size: 1.6rem;
padding: 1.6rem;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>document</title>
</head>
<body>
<nav class="nav-section">
<img class="banner-img" src="https://lehndorff.com/music/wp-content/uploads/2013/10/1600x230-banner.jpg" alt="" />
<div class="nav-link-container page-content">
<ul>
<li><a class="nav-links" href="#">Home</a></li>
<li><a class="nav-links" href="#">About us</a></li>
<li><a class="nav-links" href="#">Services</a></li>
<li><a class="nav-links" href="#">Servers</a></li>
<li><a class="nav-links" href="#">Forum</a></li>
</ul>
<div class="nav-btn-container">
<button class="nav-btn">Login</button>
<button class="nav-btn">Sign up</button>
</div>
</div>
</nav>
<header>
<div class="header-section page-content">
<h4>Hello World!!</h4>
</div>
</header>
</body>
</html>
Now I have two questions (watch the code snippet in full screen please):
When you will zoom in/out, you will see header-section stays in the middle without caring how much we zoom in/out while nav-link-container stays to the left side while zooming out/in. I think this is because of position:absolute;. So how do I fix it? Why is this happening?
I have set margin:0; & padding:0;in * but still if you see there is small pixel of gap between header-section and image. Why is it happening?
We have come up with a solution, Hope it will work for you.
Please refer to this link: https://jsfiddle.net/yudizsolutions/yk8ftdgn/
Here we have taken the image as a background image, instead of taking it in the img tag, and also made modifications in your CSS styles to achieve your desired output.
I have an issue. I have 4 divs within a div container and i am using the grid system. For some reason the third div in the grid does not respond how it should. When i give it a margin bottom, instead of pushing the div from the bottom it will just push the fourth div beneath it down even further. Any ideas on what I'm missing here?
<!DOCTYPE html>
<html>
<head>
<link rel = "shortcut icon" href = "images/icon.png">
<title>News: U.S and World News Headlines: VPR</title>
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Secular+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Raleway:wght#200&family=Secular+One&display=swap" rel="stylesheet">
</head>
<body>
<div class = "section1-container">
<div class = "item main-story">
<img class = "vinland-s2" src = "images/vinland-s2.jpg">
<h4>Anime</h4>
<h3>Vinland Saga Season 2 Announced</h3>
</div>
<div class = "item sub-story">
<img class = "witcher-s2" src = "images/witcher-s2.jpeg">
<h4>Movies/TV</h4>
<h3>First Look At The Witcher Season 2<br>See The Cast Return As Their Beloved Characters<br>
And Which Date They Will Be Appearing Again.
</h3>
</div>
<div class = "item third-story">
<h4>Japan</h4>
<h3>Japan Animation Industry Sales Fall 1.8% In 2020,<br> First Drop In Decade. How Does This Affect
The Future Of Anime?<br> A Lot Of Big Named Studios Share Their Thoughts And Plans.</h3>
</div>
<div class = "item fourth-story">
<img class = "follow" src = "images/follow.jpg">
<h3>Got anything you want to share?</h3>
<p>At VRP, we welcome your tips and stories, get started today by taking out your phone<br>
and visiting our offical journalist site to apply for a course!
</p>
</div>
</div>
</body>
</html>
*
{
margin:0;
padding:0;
box-sizing: border-box;
}
body
{
background-color: rgb(237, 236, 232);
}
.section1-container
{
width: 70%;
display: grid;
margin:300px 300px;
grid-template-columns: 1fr 1fr;
padding:2%;
overflow:auto;
background-color: white;
border:1px solid lightgrey;
padding-top: 5%
}
.sub-story
{
margin-left: 10%;
}
.third-story
{
grid-column-start: 2;
grid-column-end: 3;
margin-bottom:100px
}
.fourth-story
{
grid-column-start: 1;
grid-column-end: 3;
background-color: lightgrey;
text-align: center;
}
.vinland-s2
{
width: 586px;
height: 346px;
padding-bottom: 5%
}
.witcher-s2
{
width: 310px
}
Instead of using margin, you could use the gap property to separate the rows/columns.
Is this what you're looking for ? Here's the snippet.
*
{
margin:0;
padding:0;
box-sizing: border-box;
}
body
{
background-color: rgb(237, 236, 232);
}
.section1-container
{
width: 70%;
display: grid;
margin:300px 300px;
grid-template-columns: 1fr 1fr;
padding:2%;
overflow:auto;
background-color: white;
border:1px solid lightgrey;
padding-top: 5%;
grid-gap: 50px;
}
.sub-story
{
/* margin-left: 10%; */
}
.third-story
{
grid-column-start: 2;
grid-column-end: 3;
/* margin-bottom:100px */
}
.fourth-story
{
grid-column-start: 1;
grid-column-end: 3;
background-color: lightgrey;
text-align: center;
}
.vinland-s2,.witcher-s2
{
max-width: 100%;
height: auto;
margin-bottom: 50px;
}
<div class="section1-container">
<div class="item main-story">
<img class="vinland-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
<h4>Anime</h4>
<h3>Vinland Saga Season 2 Announced</h3>
</div>
<div class="item sub-story">
<img class="witcher-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
<h4>Movies/TV</h4>
<h3>
First Look At The Witcher Season 2<br />See The Cast Return As Their
Beloved Characters<br />
And Which Date They Will Be Appearing Again.
</h3>
</div>
<div class="item third-story">
<h4>Japan</h4>
<h3>
Japan Animation Industry Sales Fall 1.8% In 2020,<br />
First Drop In Decade. How Does This Affect The Future Of Anime?<br />
A Lot Of Big Named Studios Share Their Thoughts And Plans.
</h3>
</div>
<div class="item fourth-story">
<img class="follow" src="images/follow.jpg" />
<h3>Got anything you want to share?</h3>
<p>
At VRP, we welcome your tips and stories, get started today by taking
out your phone<br />
and visiting our offical journalist site to apply for a course!
</p>
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Center image using text-align center?
(28 answers)
Closed 1 year ago.
I am trying to make a responsive grid that has 3 columns and 3 rows, on the first row there is an image there is supposed to be at the center, just like the title and the text but I can´t find a way to do it, I have tried everything, all of the alignment terms (justify, align, self, items, content) and nothing works.
Is there a way to do it?
body {
margin: 0;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
grid-template-rows: 60vh 60vh 60vh;
row-gap: 80px;
column-gap: 10px;
grid-template-areas:"foto1 foto2 foto3"
"titulo 1 titulo2 titulo3"
"texto1 texto2 texto3";
justify-content: center;
align-content: center;
}
#Titulo_firstF, #TitleSecondF, #TitleThirdF {
text-align: center;
font-family: Montserrat;
font-weight: 500;
font-size: 12pt;
width: 100%;
}
#TextFirstF, #TextSecondF, #TextThirdF {
text-align: center;
font-family: MontSerrat;
color: black;
font-weight: 300;
font-size: 12pt;
width: 100%;
}
#foto1f img{
grid-area: foto1;
width: 20%;
}
#foto2f{
grid-area: foto2;
width: 19%;
}
#foto3f{
grid-area: foto3;
width: 19%;
}
#Titulo_firstF {
grid-area: titulo1;
}
#TitleSecondF {
grid-area: titulo2;
}
#TitleThirdF {
grid-area: titulo3;
}
#TextFirstF {
grid-area: texto1;
}
#TextSecondF {
grid-area: texto2;
}
#TextThirdF {
grid-area: texto3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style teste.css">
<title>Document</title>
</head>
<body>
<div class= features>
<div class= first_feature>
<img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png" class="fotos" id="foto1f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id = "Titulo_firstF">
GET A CUSTOMIZED<BR/>
E-MAIL ADRESS AND MORE
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id = "TextFirstF">
Looking cautiously round, to <br/>
ascertain that they were not <br/>
overheard, the two hags cowered <br/>
nearer to the fire, and chuckled <br/>
heartily.
</p>
</div>
<div class= second_feature>
<img src="https://www.imagemhost.com.br/images/2021/06/13/edit.png" class="fotos" id="foto2f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id= TitleSecondF>
40 MILLION HIGH </br>
QUALITY IMAGES
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id= TextSecondF>
At first, for some time, I was not able to </br>
answer him one word; but as he had </br>
taken me in his arms I held fast by him, </br>
or I should have fallen to the ground. </br>
</p>
</div>
<div class = third_feature>
<img src = "https://www.imagemhost.com.br/images/2021/06/13/card.png" class="fotos" id="foto3f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id= "TitleThirdF">
CREATE A SIMPLE LOGO
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id= TextThirdF>
She gave my mother such a turn, </br>
that I have always been convinced I </br>
am indebted to Miss Betsey for </br>
having been born on a Friday. </br>
</p>
</div>
</div>
</div>
</body>
</html>
It is supposed to look like this:
It is supposed to look like this:
you can use this way. Put a img in div tag and use text-aling: center. There are many ways you can do this.
.fotos-block{
text-align: center;
}
<div class="fotos-block">
<img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png" class="fotos" id="foto1f">
</div>
And you can also use this way to center the img.
.fotos{
display: block;
margin: auto;
text-align: center;
}
I am trying to achieve the card slide in effect, but when I click on the button the topbar I have changes height and is buggy.
If, however I don't use jQuery UI everything's fine but the animation of sliding is not available.
$("#abc").click(function() {
$(".route-card").show("slide");
});
$("#def").click(function() {
$(".list-card").show("slide");
});
$("#ghi").click(function() {
$(".details-card").show("slide");
});
/* === GLOBAL STYLES === */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Inter", sans-serif;
background-color: #ccc;
padding: 18px;
display: grid;
grid-template-columns: 0.8fr 1.5fr 2fr 2fr;
grid-template-rows: 0.12fr 1fr 1fr;
grid-gap: 18px;
grid-template-areas:
"sidenav route-card topbar topbar"
"sidenav route-card list-card details-card"
"sidenav route-card list-card details-card";
}
body > div {
background-color: #fff;
}
/* === (SIDENAV) COMPONENT STYLES === */
.sidenav {
grid-area: sidenav;
}
/* === (ROUTE-CARD) COMPONENT STYLES === */
.route-card {
grid-area: route-card;
display: none;
}
/* === (LIST-CARD) COMPONENT STYLES === */
.list-card {
grid-area: list-card;
display: none;
}
/* === (DETAILS-CARD) COMPONENT STYLES === */
.details-card {
grid-area: details-card;
display: none;
}
/* === (TOPBAR) COMPONENT STYLES === */
.topbar {
grid-area: topbar;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Web Page Metadata -->
<meta charset="utf-8">
<!-- Web Page Title -->
<title>English Zone | Dashboard</title>
<!-- Web Page Fonts & Stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/main.css">
<!-- Web Page Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="sidenav">
<button id="abc">CLICK ME</button>
</div>
<div class="route-card">
<button id="def">CLICK ME</button>
</div>
<div class="list-card">
<button id="ghi">CLICK ME</button>
</div>
<div class="details-card">
</div>
<div class="topbar">
<button>asd</button>
</div>
</body>
</html>
How do you think I could solve this? I would be grateful if you give me a hand in this issue.
I have a problem with my css menu.. It doesn't work....
I want to use a hover over a button, to switch a display attribute from another element.
I use CSS3 Grid-System. I don't know if that is the problem?
First things first, here is my code:
First a css part (only the affected):
.navigation{
grid-column: 1;
grid-row: 2 / 3;
justify-items: end;
justify-self: end;
width: auto;
margin: 0;
padding: 0;
background-color: rgba(0,0,0,0.7);
display: grid;
grid-template-columns: 1;
grid-template-rows: 50px 50px;
}
.navigationButton-icon{
display: none;
background-color: white;
border: 2px solid;
border-color: deepskyblue;
border-radius: 10px;
cursor: pointer;
margin-top: 5px;
padding-left: 50px;
padding-right: 50px;
}
.navigation #butInsert{
grid-column: 1;
grid-row: 1 / 2;
justify-self: start;
width: 100%;
}
.navigation #butCreate{
grid-column: 1;
grid-row: 2 / 3;
justify-self: start;
width: 100%;
}
#butMenu:hover .navigationButton-icon{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surveys</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
<link rel="stylesheet" type="text/css" href="styles/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">
</head>
<body>
<container class="container">
<header class="header">
<h1 class="headerTitle">Surveys</h1>
<div class="headerButton">
<button id="butRefresh" class="headerButton-icon"><i class="icon-arrows-cw"></i></button>
<button id="butMenu" class="headerButton-icon"><i class="icon-th-list"></i></button>
</div>
</header>
<main class="main">
<?php include('snippets/survey.php'); ?>
</main>
<navigation class="navigation">
<button id="butInsert" class="navigationButton-icon">Insert</button>
<button id="butCreate" class="navigationButton-icon">Create</button>
</navigation>
<footer class="footer">
<a class="impressum">IMPRESSUM</a>
</footer>
<div class="loader" hidden>
</div>
</container>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="scripts/app.js" async></script>
</body>
</html>
I hope you can help me. I tried it for like 3 hours now..
I can manipulate attributes from the hover element but it doesn't work for other elements of the dom.
Greetings
That's not how CSS works. #butMenu:hover .navigationButton-icon means #butMenu has to be an ancestor of .navigationButton-icon element.
You need JavaScript.
// jQuery
$('#butMenu').hover(
function () {
$('.navigation').addClass('butMenu-hover');
}, function () {
$('.navigation').removeClass('butMenu-hover');
}
);
// Vanilla JS
(function () {
var butMenu = document.getElementById('butMenu');
var navigation = document.getElementsByClassName('navigation')[0];
butMenu.onmouseenter = function () {
navigation.classList.add('butMenu-hover');
};
butMenu.onmouseleave = function () {
navigation.classList.remove('butMenu-hover');
};
})();
And in your CSS:
.navigation.butMenu-hover .navigationButton-icon {
display: block;
}