The problem is: when changing width of a window in Chrome or Safari, my grid element would create 1 additional row to fit its children, and when the window is shrunk even further it won't create any more rows, it keeps just 2 rows and, instead, begins to resize itself (pic.3).
It's the first time I see this problem and, honestly, can't understand what I'm missing there.
I've tested the same HTML file in Firefox -- and it works how intended (pic.1). The grid works just fine, creating as many rows as it needs to fit all its children. I have replicated the same styles and structure in CodePen, and it works fine on CodePen page in Chrome (pic.2), but if I download my CodePen project and open it in Chrome or Safari like an HTML file -- it has the same problem (pic.3).
I'd appreciate any suggestion or a correction. Thanks for your time.
CodePen link: https://codepen.io/vkharlakov/pen/wvjEgWM
HTML
<html>
<body>
<main>
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
</main>
</body>
</html>
CSS
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: plum;
}
main {
width: 100%;
max-width: 1920px;
display: flex;
flex-direction: column;
justify-content: center;
}
section {
width: 100%;
display: flex;
justify-content: center;
background-color: white;
}
ul {
width: 100%;
margin: 30px;
gap: 20px;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, 250px);
grid-auto-rows: 350px;
justify-content: space-evenly;
}
li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border: 3px solid steelblue;
padding: 10px;
}
If you found yourself searching the Internet with the same question, consider including this meta tag in your <head></head> section of your page:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It fixed the issue for me. Hope it helps you too!
Related
I was following Devslopes tutorial on making the navbar responsive and i reached a point where i got stuck. in his video, after writing the javascript code and mediaquery css his navbar is showing but mine is not and i did exactly the same.
tutorial video link
html code:
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign-Up</li>
<li class="topnav-right">Sign-In</li>
<li class="dropdownIcon">☰</li>
</ul>
</nav>
<script>
function dropdownMenu(){
var x = document.getElementById(dropdownClick);
if(x.className === "topnav"){
x.className += " responsive";
// change topnav to topnav.responsive
} else{
x.className = "topnav";
}
}
</script>
</body>
</html>
Css Code:
/* ***** defaults ******** */
nav,
header,
footer{
display: block;
}
body{
line-height: 1;
margin: 0;
padding: 0;
}
/* ****** Navbar ***********/
nav{
width: 100%;
margin: 0;
}
nav ul{
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li{
list-style: none;
float: left;
}
ul.topnav li.topnav-right{
float: right;
}
ul.topnav li a{
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover{
background-color: #0088ff;
color: #fff;
}
ul.topnav li.dropdownIcon{
display: none;
}
/* ************ mobile ******************** */
#media screen and (max-width: 680px){
ul.topnav li:not(:nth-child(1)){
display: none;
}
ul.topnav li.dropdownIcon{
display: block;
float: right;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a{
display: block;
text-align: left;
}
}
Thank you.
In var x = document.getElementById(dropdownClick); the element ID (dropdownClick) is a string and should be in quotes like var x = document.getElementById('dropdownClick');
In AngularJS, I have one textbox and while writing message if we type # then it should display list of names which is in arraylist.
Kindly help how can I do this feature using angularjs.
Thanks in advance
first you should publish what you have tried so far.. then only will help us to help you further...
here i wrote search alone..
for string specific,
you have to write function inside ng-change="func_name(your_txt)"
read the text use substr to find whether your text contains # if its do filter.. here i wrote filter inside ng-repeat can write filter on change will answer.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Angular animated search box - sibeeshpassion </title>
<style>
.inputText {
border: 1px solid #ccc;
border-radius: 10px;
background-color: #0ff;
box-shadow: 1px 1px 1px 1px #ccc;
width: 230px;
height: 30px;
}
ul {
list-style: none;
padding: 10px;
background-color: #CAEAF5;
border-radius: 10px;
border: 1px solid #ccc;
width: 210px;
}
li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
}
</style>
</head>
<body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu','Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">
<div>
<input type="text" ng-change="do_on_at(curPlace)" ng-model="curPlace" class="inputText">
<ul>
<li ng-repeat="place in placesVisited | filter:curPlace">
<span>{{place}} </span>
</li>
</ul>
</div>
</body>
</html>
This layout is breaking in Outlook only. I can't remember where I got the template from, so I can't give credit where it's due, but I believe it's one of Lee Munroe's templates. I can't figure out why it's breaking in Outlook 2013 and it's a simple one-column layout. I have a more complex one-column layout that I'm using with the same framework, and that one gives me no trouble at all. But when I tried to parse it down into a simpler layout, I cannot get it to play nicely with Outlook. Any ideas? Self-taught coder so I could be missing something simple. I know Outlook can't handle max-width, but this template was supposed to be Outlook ready.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Message from the CEO</title>
<style type="text/css">
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%; }
.img-block {
display: block; }
body {
font-family: open sans, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: open sans, sans-serif;
font-size: 14px;
vertical-align: top; }
body {
background-color: #F6F6F6;
Margin: 0;
padding: 0; }
.body {
background-color: #F6F6F6;
width: 100%; }
.container {
Margin: 0 auto !important;
max-width: 600px;
padding: 30px;
width: auto !important;
width: 600px; }
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 600px;
padding: 0px; }
.main {
background: #FFFFFF;
border-radius: 3px;
width: 100%; }
.wrapper {
box-sizing: border-box;
padding: 30px; }
.header {
background-color: #FFFFFF;
Margin-bottom: 0px;
Margin-top: 0px;
padding: 0px 0px 0px 0px;
width: 100%; }
.header > table {
min-width: 100%; }
h1,
h2,
h3,
h4 {
Margin: 0; }
h1 {
font-family: open sans, sans-serif;
font-size: 1.4em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 10px; }
h2 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #3C708F;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h3 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h4 {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: 700;
color: #454646;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
ul,
ol {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: normal;
color: #454646;
Margin: 0;
Margin-bottom: 20px; }
p li,
ul li,
ol li {
list-style-position: outside;
Margin-left: 15px;
padding: 0;
text-indent: 0; }
ul,
ol {
Margin-left: 5px;
padding: 0;
text-indent: 0; }
a:link {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:hover {
font-family: open sans, sans-serif;
color: #56A2CC;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:active {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:visited {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0; }
#media only screen and (max-width: 600px) {
h1 {
font-size: 24px !important;
Margin-bottom: 10px !important; }
h2 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h3 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h4 {
font-size: 18px !important;
Margin-bottom: 10px !important; }
p,
ul,
ol,
td,
span,
a {
font-size: 16px !important; }
.wrapper {
padding: 10px !important; }
.content {
padding: 0 !important; }
.container {
padding: 0 !important;
width: 100% !important; }
.header {
Margin-bottom: 10px !important; }
.main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important; }
.img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important; } }
#media all {
.ExternalClass {
width: 100%; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important; } }
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body class="">
<table border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader">Read the latest update from Johnson Financial Group.</span>
<table class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp_600px.jpg" title="A Message from the CEO" alt="Header Image" width="600" class="img-responsive" border="0"></td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h1>Headline</h1>
<p>Content here. Blah blah blah blah.</p>
<h2>Subheadline 1</h2>
<p>Content here. Blah blah blah blah.</p>
<h3>Subheadline 2</h3>
<p>Content here. Blah blah blah blah. <strong style="font-weight: 700;">Read More</strong></p>
<h4>Subheadline 3</h4>
<p>Content here. Blah blah blah blah.</p>
<p><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp.png" title="Jim Popp, CEO Johnson Financial Group" alt="Jim Popp" width="100" class="img-responsive" border="0" /></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/JFG-HRZ-Web-200px.png" title="Johnson Financial Group" alt="JFG Logo" width="200" class="img-responsive" border="0" /><br />
<div> </div>
<strong style="font-weight: 700;">BANKING</strong>
<strong style="font-weight: 700;">WEALTH</strong>
<strong style="font-weight: 700;">INSURANCE</strong><br />
<div> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
</tr>
</table>
</body>
</html>
Your problems extend far beyond Outlook 2013. These problems are occurring in Outlook 2007-2016, Windows 10 Mail and Android devices.
The problem resides within the <style> sheet. If you comment out your style sheet, everything works fine when tested in Litmus.
The <style> sets the desktop <table> width to width: 100%;. But you don't want your tables at 100%, you wanted them at 600px.
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
/*width: 100%; <-- don't use this */
width: 600px;
}
Go through your <style> sheet and change width:100%; values to width: 600px;. This includes #media all, but you can skip #media only screen and (max-width: 600px) since those table values should be 100% width.
You need to figure out a way to make the controlling table 100% width and center the container tables in the parent table.
Other Issues
Your preview text is not working in Android. It's showing up and I think you want to hide it.
Open Sans will never work in Outlook or Gmail, since neither works with web fonts. You can use it for Apple, IOS, Android, AOL and other clients. I strongly suggest you use a link to a style sheet like this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Add that to your <head>.
Use this instead in your style sheet for Open Sans as recommended by Google Fonts:
font-family: 'Open Sans', Arial, sans-serif;
You should set a default fallback font, which is currently set to sans-serif to ensure the right font is used. I suggest adding one more web safe font as a fallback for consistency, because Outlook has a bad habit of reverting to Times New Roman and you don't want a serif typeface.
Good luck.
Edit: I edited this answer because I did not make it clear you could skip editing values for this media query: #media only screen and (max-width: 600px).
I'm developing a web app for mobile phones and i got a strange problem.
I have a simple page with a background image and an input field centered in the middle of the page.
The problem is whenever i click the input box and the virtual keyboard comes up, the background image and input field dimensions are recalculated according to the remaining page space.
The desired behavior is that the whole page will be pushed up.
relevant code (i'm developing with react, hence the weird names)
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style type="text/css">.location_input__LocationInputStyle___2cLQ9 {
position: absolute;
width: 85%;
height: 10%;
top: 45%;
left: 50%;
transform: translate(-50%);
background-color: transparent;
border-radius: 50px;
border: 3px solid #ffffff;
text-align: center;
font-size: 22px;
color: #ffffff;
}
</style>
<style type="text/css">.home_page_container__HomePageStyle___2f5vW {
position: relative;
width: 100%;
height: 100%;
background-image: url(86349e48855062e70072f79443fe0af6.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 40% 0;
}
</style>
</head>
<body>
<div id="app">
<div class="home_page_container__HomePageStyle___2f5vW">
<input type="text" class="location_input__LocationInputStyle___2cLQ9" placeholder="Address">
</div>
</div>
</body>
</html>
Related Images:
The problem, when keyboard pops up
Desired result
P.S: after playing with the debugger a bit, i found out that if i set the height of my app container/body/html to a fixed pixel height it doesn't happen.
Yet it's not a good solution, because i want the height to be 100% of the viewport (so it will be compatible with all devices).
How do i fix it properly?
You can specify min-height for the keyboard div.
You can also try giving the dividing the text part and keyboard part in vh (viewport height, like for input div : 50vh,keyboard :50vh ) instead of giving height:100%;.Please remove all other heights.
I am new to responsive web design and I am not sure why the ordered list and list is not responsive like the rest of the page.
#container {
text-align: center;
}
ol {
text-decoration: none;
font-family: helvetica;
width: 100%;
text-align: center;
margin-left: 500px;
text-decoration: none;
}
li {
text-decoration: none;
font-family: helvetica;
letter-spacing: 3px;
line-height: 25px;
color: green;
width: 100%;
padding-bottom: 10px;
font-size: 10px;
text-align: left;
}
<div id="container">
<h2>Step 1: Choose Your Drink</h2>
<ol>
<li>Chai Latte</li>
<li>Americano</li>
<li>Pumpkin Spice Latte</li>
<li>Vanilla Bean Frappuccino</li>
</ol>
<h2>Step 2: Join Us! and receive daily drink recipes.</h2>
</div>
any suggestions?
Thanks!
The ol{margin-left: 500px} is the culprit.
Try the following changes
ol{
font-family: helvetica;
text-decoration: none;
}
li{
text-decoration: none;
font-family: helvetica;
letter-spacing: 3px;
line-height: 25px;
color: green;
padding-bottom: 10px;
font-size: 10px;
list-style-position: inside;
}
I don't think this was exactly what you were looking for, but it should get you closer