CODEWITHSUNDEEP
htmlcssflexbox
SavageStyle
SavageStyle

Reputation: 61

flexbox styles ignored on all mobile divices, but works on desktop

Desktop expirience

Mobile expirience

I am learning flexbox, but seems it is not working properly on any mobile device. First picture is desktop expirience and the second is mobile. All just shrinks and wrapping is not working. flex setup:

.search-form {
    display: flex;
    flex-wrap: wrap;
}
input[type="search"] {
    flex: 2 0 250px;
}
button[type="submit"] {
    flex: 1 0 90px;
}

Here is snippet with all HTML and CSS. How i can set this to work on mobile devices?

/*basic styles*/
html, body {
	margin: 0;
}
html {
	background: #88686A;
}
body {
	font: 100% Lato, Helvetica, sans-serif;
	background: white;
	width: 80%;
	margin: 0 auto;
	padding: 2%;
	line-height: 1.6;
}
article, aside, section, nav, figure, header, footer {
	display: block;
}
h1, h2, h3, h4 {
	font-weight: normal;
	font-family: LatoLight, Helvetica, sans-serif;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
	color: #575451;
	margin: 0;
	line-height: 1;
}
h1 {
	font-size: 2.6em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.8em;
	text-transform: uppercase;
}
h4 {
	font: 1.2em Lato, Helvetica, sans-serif;
	color: black;
}
p
 {
	margin: 0 0 1em;
}
a {
	color: #77A0B8;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
code {
	color: red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>short forms</title>
<link href="_css/base.css" rel="stylesheet" type="text/css" media="screen">
<style>
	.search-form{
		width:80%;
		margin: 0 auto;
	}
input[type="search"] {
	box-sizing: border-box;
	background: #E9E9E9;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0.35em 0.75em;
	border: none;
	font-size: 1.1em;
	text-decoration: none;
	line-height: normal;
	max-height: 3em;
}
button[type="submit"] {
	box-sizing: border-box;
	border-radius: 0px 2px 2px 0px;
	background: #8B798C;
	font-weight: 300;
	text-transform: uppercase;
	color: white;
	padding: 0.35em 0.75em;
	border: none;
	font-size: 1.1em;
	text-decoration: none;
	cursor: pointer;	
	
}
button[type="submit"]:hover {
	background: #C17CCF;
}
/*flex it*/
.search-form {
	display: flex;
	flex-wrap: wrap;
}
input[type="search"] {
	flex: 2 0 250px;
}
button[type="submit"] {
	flex: 1 0 90px;
}
@media (max-width:450px){
	body{
		width: 100%;
		margin:0;
		padding: 1em 0 2em;
	}
	header {
		padding: 2% 5%;
	}
}
</style>
</head>
<body>
<header>
<h1>Creating Responsive Forms with Flexbox</h1>
<p><a href="http://www.w3.org/TR/css3-flexbox/" title="Flexbox">Flexible Layout Box Model</a>, better known as <strong>Flexbox</strong>, is a great tool for crafting responsive regions or UI elements. While not well-suited for complete page layouts, Flexbox excels at controlling elements along a single axis or in arranging elements within discreet regions. This makes Flexbox a fantastic tool for creating responsive page elements that are normally tricky to handle, such as forms. Often Flexbox can create responsive components with a minimal amount of code and little to no media queries.</p>
<h2>Short Forms</h2>
<p>Our first exercise will focus on the basic concepts of how Flexbox can help create responsive content. We'll start with a basic search form that consists of two elements, a search input and a submit button.</p>
</header>
<article class="example">
<form class="search-form">
  <input type="search" name="search" placeholder="Search this site" class="search-input">
  <button type="submit" class="search-btn">Search</button>
</form>
</article>
</body>
</html>

Upvotes: 0

Views: 283

Answers (1)

Sunil Singh Rawat
Sunil Singh Rawat

Reputation: 96

Please use viewport meta tag to control layout on mobile browsers, Please add meta tag on head section:

<meta name="viewport" content="width=device-width">

Upvotes: 2

Related Questions