I am trying to make the telephone button responsive on mobile.
In my browser's developer tools everything seems good in every mobile screen resolution, but when I access the site from mobile the phone number is split into 2 lines, instead of making it one line in a box.
Example
html
050-475-1410
css :
* {
margin: 0;
padding: 0;
}
body {
overflow: scroll;
margin: 0;
font-size: 17px;
color: black;
line-height: 1.4;
}
#media only screen and (max-width: 2000px) {
.call {
/*Your styles on small screen - example only*/
width: 200px;
font-size: 30px;
.span{display: inline;}
}
}
#media only screen and (max-width: 600px) {
.call {
/*Your styles on small screen - example only*/
width: 150px;
font-size: 25px;
.span{display: inline;}
}
}
#media only screen and (max-width: 370px) {
.call {
/*Your styles on small screen - example only*/
width: 125px;
font-size: 20px;
.span{display: inline;}
}
}
#media only screen and (max-width: 330px) {
.call {
/*Your styles on small screen - example only*/
width: 120px;
font-size: 20px;
.span{display: inline;}
}
}
.call {
color: #2c3e50;
background: none;
border: 1px solid #2c3e50;
text-align: center ;
padding: 10px, 20px;
margin: 5px;
font-family: font1;
text-decoration: none;
position: relative;
cursor: pointer;
top: 2px;
}
HTML treats hyphen text as words, that's why they break down on small screen.
use white-space: nowrap;
also you can use these hyphen uni-codes ‑ or ‑
I'm facing issue for responsiveness using DreamWeaver 2017.
The CSS for the logo :
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
Upon trying out the responsiveness :
I'm aware i'm using margin left which caused it.
The objective is to adapt both site and mobile site like this :
Also, if you observed even the input box also indent to the right..
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
I'm looking on other method than padding or margin.
Any critic/suggestion is welcome.
HTML codes:
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo"/>
<font color="black" class="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder="Quick Search for any city or
street in Japan" style="border:none;"/>
</div>
</div>
</header>
Codepenio : https://codepen.io/jayvicious/pen/xrxbZz
There is a lot going on here that we can look at. One thing others have commented on is that your HTML needs cleaned up. Make sure that IDs are truly unique, and that each opening tag has a closing tag (except for self-contained elements, like images and inputs).
You could also stand to use some wrapping elements to help you contain the main areas of your header: the logo, the nav items, and the search.
From there, to help with responsiveness, I would recommend using percentages for your widths whenever possible, instead of absolute units like centimeters. This will help your display flex a little bit at bigger screen sizes. At some point, though, you'll need to just redo the layout because the screen will be too wide to fit all your elements in one line. That's where media queries come into play.
Media queries will let you override a base style when the screen is smaller (or larger) than a certain width. For example, we could set the body to be blue normally, then change to red on smaller screens:
body {
background-color: blue;
}
#media all and (max-width: 800px) {
body {
background-color: red;
}
}
Another thing we can do to tidy things up and make our life easier is to use classes when possible. The nav items are a good use case for this: most of their styles will be shared. We can give them each an ID just in case, but we may not even need to use all those IDs.
Edit: Another tidying opportunity I meant to mention is that the use of the <font> tag is deprecated as of HTML5, so you should avoid that in your HTML. I removed it from the HTML in my snippet below. (End edit.)
A final thing you can do is make the little triangles next to the nav items with HTML and CSS instead of as images. (You could also do these purely in CSS using pseudo elements.)
Here is a demo where I've cleaned up your HTML quite a bit and then heavily revised the CSS to look more like what's in the pictures you provided. I have used placeholder images with my best guess at their real sizes based on the picture. You'll see that as you resize the screen, the media queries kick in to make the header get taller and to center things in the middle of the screen.
I've also forked your Pen on CodePen.
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
body {
margin: 0;
}
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
background-color: #73A7D1;
font-size: 14px;
font-style: normal;
font-weight: 400;
width: 100%;
height: 80px;
}
#header-wrapper {
width: 80%;
margin: 0 10%;
padding-top: 15px;
}
#logo, nav, #search {
float: left;
}
#logo {
width: 110px;
height: 50px;
}
nav {
width: 60%;
}
#search {
width: 200px;
}
.menu-item {
display: inline-block;
margin: 0 2.5%;
height: 30px;
color: black;
max-width: 100px; /* forces "sign in/register to break at <wbr> tab */
text-align: center;
}
#menu2 {
position: relative; /* bump "sign in/register" down a bit */
top: 7px;
}
.triangle-down { /* dropdown arrows next to nav links */
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
display: block;
float: right;
margin-top: 5px;
margin-left: 3px;
}
#search img, #search input {
float: left;
height: 30px;
}
#search img {
margin-right: 5px;
}
#search input {
width: 150px;
}
#media all and (max-width: 980px) {
header {
height: 160px;
}
#logo, nav, #search {
float: none;
margin: 0 auto;
}
nav {
width: 100%;
text-align: center;
}
}
#media all and (max-width: 550px) {
header {
height: 200px;
}
}
<header>
<div id="header-wrapper">
<div id="logo"><img src="http://placehold.it/110x50" alt="sojologo"></div>
<nav>
<div class="menu-item" id="menu1">ABOUT<span class="triangle-down"></span></div>
<div class="menu-item" id="menu2">SIGN IN/<wbr>REGISTER</div>
<div class="menu-item" id="menu3">PROMOTIONS</div>
<div class="menu-item" id="menu4">TRAVEL<span class="triangle-down"></span></div>
</nav>
<div id="search">
<img src="http://placehold.it/30x30"/>
<input placeholder="Quick Search for any city or street in Japan" />
</div>
</div>
</header>
well FreedomPride
you can specify different properties for every class in each size of screens
you can use media query in this situation.
for example :
#media only screen and (max-width: 480px) {
.menu2 {
margin-left:20px;
}
}
as you see here I changed the margin in small screens 480px wide to 20px
and you can use it for each size
320px
480px
720px
1200px
you may get more information for mediaquery from here :
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
here's example of how we can do it :
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
/*header*/
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-style: normal;
font-weight: 400;
}
#menu1 {
display: inline-block;
margin-left: 3cm;
margin-right: auto;
height: 30px;
}
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
/* Logo placeholder*/
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#logodropdown {
margin-left: 0px;
border: none;
background-color: rgba(255,255,255,1.00);
}
/* div for Links in header */
#headerLinks {
float: left;
width: calc( 100% - 139px );
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(255,255,255,1.00);
}
/* Links in header */
#imgContainer{
float:left;
}
#headerLinks a {
text-decoration: none;
color: rgba(146,146,146,1.00);
padding-left: 66px;
font-size: 14px;
}
/* Offer text banner*/
#offer {
font-family: 'Montserrat', sans-serif;
clear: both;
background-color: rgba(246,246,246,1.00);
color: rgba(146,146,146,1.00);
padding-top: 57px;
padding-bottom: 57px;
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1280px) {
#logo {
margin-left:30px;
}
#menu1 {
margin-left:35px;
}
.menu2 {
margin-left:20px;
}
.menu2 input {
max-width:300px;
}
}
#media only screen and (max-width: 992px) {
#logo {
margin-left:25px;
}
#menu1 {
margin-left:25px;
font-size:18px;
}
.menu2 {
margin-left:15px;
font-size:14px;
}
.menu2 input {
max-width:250px;
font-size:11px;
}
#media only screen and (max-width: 720px) {
#logo {
margin-left:10px;
}
#menu1 {
margin-left:10px;
font-size:13px;
}
.menu2 {
margin-left:5px;
font-size:10px;
}
.menu2 input {
max-width:150px;
font-size:10px;
}
}
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo">
<font color="black" id="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder=" Quick Search for any city or street in Japan" style="border: none;"/>
</div>
Notice: This isn't the best practice. but for more efficient you have to use any grid system or framework like bootstrap, foundation or uikit.
I think you should check for media rules to get full responsiveness in any width/height you want.
I'm not sure why the follow CSS code isn't doing anything, it was working I did some changes it was a good bit I don't really call all what I changed, but then now its just staying on what's supposed to be the mobile version. I also tried adding "screen" and "all", nothing.
Running it in updated Google Chrome and also tried Edge.
/*
MEDIA QUERIES
*/
#media (min-width: 615px) {
header h1 {
transform: scale(1,1);
text-align: left;
padding-left: 5%;
}
.main-container img {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.mobileRef {
display:none;
}
nav a {
font-size: 18px;
}
nav li {
padding: 0 1.5%;
}
nav {
text-align: right;
}
header p {
display: inline-block;
float: right;
font-size: 1.3vw;
margin: 12px 5% 0 0;
}
.break {
display: none;
}
)
Change your end bracket on your query. Should be }, not )
#media (min-width: 615px) {
.class
{
.myclass:value;
}
}
I am creating a responsive header. I got two columns and want the button in the right column to be vertical centered.
I know I can center items using top: 50%; margin-top: -xy px, and my button although got a fixed height: 40px.
To use this method I wrapped my button inside a div {position: relative}. This does not work, as the div does not stretch its own height.
How can I solve this with css? First I thought about Flexbox, but it has quite some lack of browser compatibility.
JSFIDDLE DEMO
You can greatly simplify your code - remove floats, (use display: inline-block instead), remove the .relative div, etc.
Working Fiddle
html, body {
margin: 0;
padding: 0;
font-size: 16px;
}
header {
background: red;
color: #fff;
padding: 0.5em;
}
header h1 {
font-size: 2em;
margin: 0 0 0.2em;
}
header p {
margin: 0;
}
header button {
height: 40px;
width: 70px;
}
.column-left {
display:inline-block;
width: 70%;
vertical-align: middle;
}
.column-right {
width: 29%;
text-align: right;
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* responsive */
#media (min-width: 200px) {
header {
padding: 1em;
}
}
#media (min-width: 300px) {
header {
padding: 1.5em;
}
}
#media (min-width: 400px) {
header {
padding: 2em;
}
}
#media (min-width: 500px) {
header {
padding: 2.5em;
}
}
#media (min-width: 600px) {
header {
padding: 3em;
}
}
/* helpers */
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
Remove this div with position: relative and add position: relative to your header tag. You can even delete your column-right div.
Another solution:
header button {
top: 50%;
transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix)
}
JSFIDDLE
SOLVED: See answer below. I'd still love to know WHY this happened and why the fix worked.
UPDATE: Could my problem be related to this webkit bug:
Bug 53166: 'display' styles in media queries don’t get re-applied correctly after resizing?
When my desktop-size media query kicks in, something happens to my nav bar that doesn't "unhappen" when the window width drops back below that size. The issue only appears to happen in Chrome or Safari. I believe it has to do with the display property, and it feels like a bug.
You can see the behavior here.
To reproduce mobile menu problem, start with Chrome / Safari or iPad Safari.
Start with browser wider than 1023px (landscape on iPad)
Make browser smaller than 1024px (or rotate iPad)
Click Menu -- problem #1 appears
To reproduce desktop menu problem
Start with browser wider than 1023px
Make browser smaller than 1024px
Make browser wider than 1023px again
Problem #2 appears
Notes:
If I start below 1024px, everything works great.
If I start below 1024px enlarge the window over 1024px, everything works great.
If I start above 1024px, everything works great.
This ONLY breaks if I start above 1023px and resize lower.
I think the issue has something to do with the the table-cell CSS property I'm using, but I can't figure it out.
There's some JS going on here but the problem appears even with JS disabled.
For now I'll include the Header HTML / CSS in hopes that the answer is something simple.
HTML
<div class="header">
<img class="logo" src="/assets/logo.png" />
<button id="toggle" class="closed"></button>
</div>
<div class="spacer clearfix"></div>
<div id="nav">
<ul class="primary-nav">
<li>Sundays</li>
<li>Learn More</li>
<li>Citygroups</li>
<li class="desktop-logo"><img src="/assets/logo.png" /></li>
<li>Discipleship</li>
<li>Sermons</li>
<li>Get in Touch</li>
</ul>
</div>
Here's the CSS, including the Media Queries
.header {
position: absolute;
width: 100%;
height: 70px;
z-index: 9999;
background: #FFF;
}
img.logo {
float: left;
width: 40.3125%; /* 129px / 320px */
margin: 24px 0 23px 9.375%; /* 24 0 23 30 */
}
.spacer {
height: 70px;
}
/* Main Nav */
button#toggle {
float: right;
border: none;
width: 6.5625%;
min-height: 23px;
margin: 24px 9.375% 23px 34.375%;
padding: 0;
background: url(assets/nav-toggle.png) center no-repeat;
}
button#toggle.opened {
background: url(assets/nav-toggle-opened.png) center no-repeat;
}
#nav {
width: 100%;
height: -moz-calc(100% - 70px);
height: -webkit-calc(100% - 70px);
height: calc(100% - 70px);
z-index: 9999;
}
.js #nav {
clip: rect(0 0 0 0);
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
#nav ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: table;
list-style: none;
background-color: #363636;
border-bottom: solid #1E1E1E 1px;
}
#nav li {
width: 100%;
display: table-row;
}
#nav li a {
display: table-cell;
vertical-align: middle;
border-top: solid #1E1E1E 1px;
padding: 0 0 0 9.375%;
}
#nav li.desktop-logo { /* Necessary for centered logo on wide displays */
display: none;
}
/*--------------------------------------------------
4. HOME - LARGE MOBILE
- Min-Width: 321px -
---------------------------------------------------*/
#media screen and (min-width: 321px) {
img.logo {
max-width: 159px;
margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */
}
h1 {
font-size: 2.7969em;
}
h5 {
font-size: 1.3125em;
}
}
/*--------------------------------------------------
4. HOME - MOBILE LANDSCAPE
- Min-Width: 321px -
- Orientation: Landscape -
---------------------------------------------------*/
#media screen
and (min-width: 321px)
and (max-width: 768px)
and (orientation: landscape) {
.headline {
display: block;
width: auto;
height: auto;
overflow: none;
margin-top: 5%;
}
}
/*--------------------------------------------------
4. HOME - SMALL TABLET / LARGE PHONE
- Min-Width: 481px -
---------------------------------------------------*/
#media screen
and (min-width: 481px) {
img.logo {
max-width: 159px;
margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */
}
h1 {
font-size: 3.3438em;
}
h5 {
font-size: 1.625em;
}
}
/*--------------------------------------------------
5. HOME - LARGE TABLET LAYOUT
- Min-Width: 601px -
---------------------------------------------------*/
#media screen
and (min-width: 601px) {
h1 {
font-size: 4.5625em;
}
h5 {
font-size: 2.25em;
}
}
/*--------------------------------------------------
5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/
#media screen
and (min-width: 1024px) {
.header {
position: fixed;
top: 0;
height: 87px;
background: none;
display: none;
}
img.logo, .spacer {
display: none;
}
.js #nav {
position: relative;
}
.js #nav.closed {
max-height: none;
}
#nav-toggle {
display: none;
}
button#toggle {
display: none;
}
#nav {
height: auto;
}
#nav ul {
height: 87px;
width: 66.6666666667%;
min-width: 1024px;
margin: 0 auto;
border: 0;
background-color: #fff;
}
#nav li {
width: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: .875em;
}
#nav li a {
display: inline-block;
vertical-align: none;
text-align: center;
line-height: 87px;
border: 0;
padding: 0;
margin: 0;
}
#nav li a, #nav li a:active, #nav li a:visited {
color: #58585A;
}
#nav li a:hover {
color: #FAAC1D;
}
#nav li.desktop-logo {
display: table-cell;
width: 206px;
padding: 0 20px;
}
#nav li.desktop-logo img {
padding: 0;
}
#nav li.desktop-logo a {
display: inline;
line-height: 0;
}
.flexslider {
height: -moz-calc(100% - 87px);
height: -webkit-calc(100% - 87px);
height: calc(100% - 87px);
}
.headline hr {
width: 50%;
}
}
Sorry to be answering so many of my own questions. No one saw this one. I'm sure this will help someone.
I saw this similar question regarding the webkit bug. Their solution to add display: table-row to the UL tag worked. However, in my situation, I needed the UL to be centered with a width < 100%, both of which weren't possible as a table-row.
The final solution was to move display: table to the parent div (#nav). When I did this and removed it from the <ul> tag, everything worked perfectly. I don't know why.
The original link is updated and working now.
Final working CSS (media query only):
/*--------------------------------------------------
5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/
...
.js #nav {
position: relative;
display: table;
}
...
#nav ul {
height: 87px;
width: 66.6666666667%;
min-width: 1024px;
margin: 0 auto;
border: 0;
background-color: #fff;
}