i've done a simple hmtl site and wanted to make it responsive to mobile but i can't
ive tried a media code but still doesn't work idk what to do
can you help me
this is how it looks from mobile
and
this is my css
body{
margin: 0px;
display: inline;
align-self: center;
}
h1 {
font-family: cairo-bold;
text-align: center;
color: #697683;
}
h2 {
font-family: sky-bold;
text-align: center;
color: #1ba690;
}
.iinkor-box {
background-color: #f8f8f8;
height: 180px;
width: 180px;
display: inline-block;
margin-bottom: 15px;
margin-right: 8px;
margin-left: 8px;
}
.iinkor-box img {
width : 138px;
height: 108px;
display: inline-block;
padding: 10px;
}
.iinkor-box a {
color : #41978f;
font-size: 16px;
font-family: bein;
display: inline-block;
}
.iinkor-box img:hover {
opacity: 80%;
}
a:active {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: none}
a:link {text-decoration: none}
.iinkor-button {
background-color:#07439b;
border-radius:28px;
border:1px solid #1978ab;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:sky-bold;
font-size:17px;
padding:11px 18px;
text-decoration:none;
text-shadow:0px 1px 0px #284666;
}
.iinkor-button:hover {
background-color:#2a71bd;
}
.iinkor-button:active {
position:relative;
top:1px;
}
#media only screen and (max-width:800px) {
/* For mobile phones: */
.iinkor-box {
width:60%;
}
}
please if you edit the code tell me what to do also so i can know for the future
thank you in advance
Instead of trying to make it responsive only to mobile, consider that you app should be responsive to any screen size.
In the above css code the only rule that is "responsive" is the width: 60% everything else is pretty much static.
How is your HTML tree constructed? Where are the .iinkor-box container rules?
And more importantly, what is your desired effect?
Consider working with flexible patterns.
Start mobile first and then progressively enhance your code to achieve the desktop view.
My email looks great in all inboxes except outlook (according to Constant Contact's inbox preview - I'm not sure which version of Outlook it's showing me). It looks as though Outlook is ignoring the vast majority of the styles I declared in my head, including simple ones such as display:block background color, and font-family. Even with an !important. I think the only style it's respecting is the text-decoration. Any thoughts? I've tried inlining the styles, it makes no difference.
<style>
.button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: block!important;
margin: 4px 0;
background-color: #00a1e1!important;
color: white!important;
text-decoration: none;
padding: 5px 15px;
}
.button::hover {
background-color: #76bd1d!important;
}
.button-donate {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: auto;
background-color: #f36d2f;
color: white!important;
text-decoration: none;
padding: 10px 20px;
}
.button-donate::hover {
background-color: #76bd1d;
}
.footer {
text-align: center;
color: white;
line-height: 1;
}
.footer a {
text-decoration: none;
color: white!important;
display: inline-block;
}
.table-padding {
padding: 40px;
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.inner-table {
width: 100%!important;
}
.button {
padding: 10px 15px;
}
}
#media only screen and (max-width: 500px) {
.table-padding {
padding: 25px!important;
}
}
</style>
<strong>$1,000</strong> provides meat, dairy, and eggs to a family for one year
I found the problem. Outlook was ignoring styles with an !important by them.
Welcome to email styling. It can be frustrating here. Outlook does in fact ignore a lot of css markup. Here is a guide that helped me a great deal when I first started.
https://www.campaignmonitor.com/css/
you can look up the styles you are using to see if it will be ignored before you use it and try to mark up the code a different way.
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 have a logo laid out in a box at the top of my page using the following style elements:
div.imgBox {
margin: 0%;
padding: 1%;
border: 0px;
background-color: #00A7FF;
}
div.imgBox img {
display: inline;
margin: 0px;
padding: 1%;
border: 0px solid #00A7FF;
}
Which does an okay job of allowing me to position the image how I want it in an area at the top of my page (along with some other elements such as nav items). I'd like the whole thing to display without a border so it fills up the whole of the top of the browser window. I can achieve this by adding:
body {
margin: 0px;
padding: 0px;}
But when I do this it causes the image in the box to be clipped. I'm sizing the image in the html:
<img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">
The image only clips when I add the body margin and padding, my question is: how do I get the elements at the top of the page to display so they take up the whole browser window width and go right to the top without the image clipping?
Here is the whole source, as requested:
div.imgBox {
margin: 0%;
padding: 1%;
border: 0px;
background-color: #00A7FF;
}
div.imgBox img {
display: inline;
margin: 0px;
padding: 1%;
border: 0px solid #00A7FF;
}
.hdrBox {
display: inline;
float: left;
margin: 0px;
width: 100%;
background-color: #00A7FF;
}
a:link {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
navBar{
float: right;
right: 5vw;
top: 10vw;
list-style-type: none;
margin: 0;
padding: 0;
}
navElement{
font-family: "Arial", Helvetica, sans-serif;
font-size: 2vw;
color: #FFFFFF;
float: right;
display: block;
width: 10vw;
border: 0.25vw solid #FFFFFF;
padding-left: 1vw;
padding-bottom: 0.25vw;
padding-top: 0.25vw;
margin: 0.25vw;
}
That's in style tags in the head section of the HTML and then some fairly simple (until I get the style sorted!) HTML in the body:
<body>
<div class="imgBox">
<img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">
<navBar>
<navElement>Contact</navElement>
<navElement>Examples</navElement>
<navElement>Services</navElement>
<navElement>Profile</navElement>
<navElement>Home</navElement>
</navBar>
</div>
<div class="hdrBox">
</div>
I plan to move the style elements to a separate CSS once I've got it sorted. This works fine but when I add the aforementioned body margin padding elements to the start of this it clips the image.
This is how it displays in Firefox. Note the clipping on the text at the bottom and left of the logo, minor admittedly but still annoying the heck out of me!
I must apologise, I think it must have been my twin screen setup! It displays perfectly on my laptop when I run it in single screen mode. MASSIVE facepalm! When I reconnect the second monitor and refresh the clipping is still evident (although apparently slightly less so since a reboot so maybe Dave had something with the cache issue?) Thanks to all who've contributed and SIGNIFICANT apologies for having wasted your time on this! Really should have stripped it down to basics and tried to remove all variables before posting, I've overcomplicated the issue (gonna claim noob numpty for my lack of experience in website building as the cause).
Anyway, big thank you for being my rubber ducks (Coding Horror - Rubber Duck Problem Solving)
Tempted to give myslef a downvote for this...
I have this url:
oios.kemne.com
when I visit this in the mobile I get this:
The relevant html segment is as follows:
<div class="focus">
<div id="f_image">
<img src="/assets/6112e42e/images/man.jpg"></img>
</div>
<div id="text4">
<div id="f_heading"></div>
<div id="f_tex1"></div>
<div id="f_tex2"></div>
</div>
</div>
is the container.
is the image holder.
is the header.
is the column 1.
is the column 2.
The relevant css styles are as follows:
#f_image {
width: 35%;
height: 111px;
float: right;
margin-top: 12px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
.focus {
height: auto;
background-color: #DCDDDE;
float: left;
margin-top: 20px;
margin-right: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#text4 {
width: 60%;
height: auto;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_heading {
width: 80%;
height: 30px;
font-size: 15px;
color: #1A6EB4;
margin-left: 10px;
margin-top: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex1 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex2 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 20px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
As can be seen from the mobile (note3), the styles are completely messed up. The image spill over the containing div and the heading overlap the column1.
If I remove the width attribute from the #f_image, then the image fits inside the containing div (.f_focus). But the problem is that, it affects the rendering in desktop browser. I can probably use two separate stylesheets for desktop and mobile. But then it would require a lot of rewriting and duplication and the styles would be scattered. More importantly, the logic of the layout is very simple - the image is 35% of the containing div. So if the containing div resizes in the mobile or any other screens, then the image should resize automatically. The fact that removing the width fits the image inside the containing div also bears testimony that there are enough room to accommodate the image. For the rest of things, ie the overlapping of the header with the column, I am not quite sure of the reason of it failing.
I am completely clueless. I even tried to debug the mobile version using firefox remote debugger. So please help me with resolving this.
Many thanks in advance.
You can use the CSS3 #media-queries over here. I don't know the width at which you'd like the mobile styles to take over the desktop styles but just for an example, I am using 768px as the width after which the mobile styles will take over the desktop styles.
#media (max-width: 768px) {
#f_image img {
width: 100%;
}
#f_heading {
height: auto;
}
}
Please place the above styles at the bottom of your stylesheet and then try viewing the website on your mobile device or try resizing your browser window to less than 768px.