I am designing a mobile template. In that, Header is linked to the home page for the website. But the problem is there are two different headers for desktop and mobile. I want to link both the images to the home page of the website.Initially I tried
.Header {
width: 320px;
display: block;
height: 100px;
background: url('Images/mobile.jpg') no-repeat;
}
.headerimg img {
display: none !important;
}
<tr>
<td width="500"><a class="headerimg" href="http://www.google.com/" target="_blank"><img src="Images/desktop.png" alt="Google" height="160" width="500" border="0" style="display:block;"></a></td>
</tr>
Then I tried to do it placing two images size by size and hiding one based on the view
.MobileHeaderImg {display: none !important;}
.HeaderImg {display: block !important;}
.HeaderImg a{display: block !important;}
#media handheld, screen and (max-width: 500px) {
.MobileHeaderImg {
position: relative;
display: block !important;
width: 320px !important;
height: 100px !important;
}
<tr>
<td width="500"><img src="Images/header.png" class="HeaderImg" alt="" height="160" width="500" border="0" style="display:block;"><a class="headerimg" href="http://www.google.com/" target="_blank"><img src="Images/mobile.png" class="MobileHeaderImg" alt="" height="160" width="500" border="0" style="display:block;"></a></td>
Any Idea
Thanks in Advance
I forget where I picked this up from (somewhere in Email on Acid), but the below code should solve your issue. It will likely take some tweaking to fit into your template.
<!doctype html>
<html>
<head>
<style>
#media only screen and (min-device-width: 500px) and (max-device-width: 1024px) {
span[id=switcher] {display:block;
background-image: url(http://www.emailonacid.com/images/blog_images/Emailology/2013/tablet.jpg) !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 300px !important;
height: 250px !important; }
img[id=houdini] {display: none !important; }
}
#media only screen and (max-device-width: 489px) {
span[id=switcher] {display:block;
background-image: url(http://www.emailonacid.com/images/blog_images/Emailology/2013/mobile.JPG) !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 300px !important;
height: 250px !important; }
img[id=houdini] {display: none !important; }
}
</style>
<body>
<span id="switcher"><img id="houdini" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/Desktop.jpg" alt=""></span>
</body>
Related
been struggling for some time now.
I'm trying to give my welcome-section the same size as the viewport, but I just can't seem to get it done, whatever I do...
Then also, the bottom is hidden under the safari menu when I check the mobile version. I used the same formula as I used before on another project, but it doesn't work here.
Can somebody clarify, please?
Many thanks in advance!
body {
background: linear-gradient(to top right, grey, black);
height: 100%;
}
#navbar {
position: fixed;
width: 100%;
display: block-inline;
top: 0;
left: 0;
background: #db0b15;
}
.navbar {
text-align: right;
margin-right: 10px;
}
.navbar-item {
display: inline;
padding-left: 30px;
color: white;
font-size: 20px;
text-decoration: none;
text-align: center;
}
welcome-section {
height: 100%;
width: 100%;
}
a {
color: white;
text-decoration: ;
text-align: center;
}
h1 {
padding-top: 150px;
text-align: center;
color: white;
}
p {
color: white;
text-align: center;
}
.subheader {
font-size: 30px;
text-decoration: underline;
padding-top: 50px;
padding-bottom: 20px;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 150px 150px;
grid-column-gap: 70px;
grid-row-gap: 50px;
justify-content: center;
align-content: center;
}
.project-img {
height: 120%;
width: 120%;
}
.icon {
padding-right: 20px;
padding-left: 20px;
}
.profile-link: {
color: blue;
}
#welcome-section {
height: 100vh;
}
#media only screen and (max-width: 600px) {
.project-img {
max-width: 100%;
max-height: 100%;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 160px 160px;
grid-template-rows: 120px 120px;
grid-column-gap: 5px;
grid-row-gap: 5px;
justify-content: center;
align-content: center;
margin-right: 10px;
}
#media screen and (max-width: 768px) {
_::-webkit-full-page-media,
_:future,
:root .safari_only {
padding-bottom: 170px; //resize
}
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1c24d3937a.js" crossorigin="anonymous"></script>
<title id="title">Personal Portfolio - Iwan Van den Broeck</title>
</head>
<body id="body">
<navbar id="navbar">
<ul class="navbar">
<li class="navbar-item">Welcome</li>
<li class="navbar-item">Projects</li>
<li class="navbar-item">Contact</li>
</ul>
</navbar>
<welcome-section id="welcome-section" class="welcome-section">
<h1>Welcome to my Portfolio.<br><br>I am Iwan<br><br> and I'm a Web Developer<br><br></h1>
</welcome-section>
<projects-section id="projects">
<p class="subheader">These are some of my projects:</p>
<project-list class="project-list">
<a id="tribute-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/YzZoXvY" target="blank" alt="link to Steve Jobs tribute page"><img src="https://drive.google.com/thumbnail?id=1pTGPtU4oKYReRbMnAPkeC1ll-Nor0dSo" alt="screenshot of tribute page" class="project-img"></a>
<a id="survey-form" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/mdWZNPd" target="blank" alt="link to AirAsia customer satisfaction survey"><img src="https://drive.google.com/thumbnail?id=1Sclylussw2JNXSSlD3qs7xABHVKx_0LV" alt="screenshot of survey form" class="project-img"></a>
<a id="product-landing-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/NWjKdre" target="blank" alt="link to Apple landing page"><img src="https://drive.google.com/thumbnail?id=1RY4MuLY8knZk6pogcMwApjJ-fYOtTUCu" alt="screenshot of landing page" class="project-img"></a>
<a id="technical-documentation-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/BaRaRWp" target="blank" alt="link to JS technical documentation page"><img src="https://drive.google.com/thumbnail?id=1Pxp17-rmWZqD0or3lmF2UvtPbKuCyC6l" alt="screenshot of technical documentation page" class="project-img"></a>
</project-list>
</projects-section>
<contact-section id="contact">
<p class="subheader">Contact me:</p>
<p>Let's do some projects together! Contact me for more information.</p>
<p id="contact-links">
<p>
<i class="fas fa-phone-square-alt icon"> Call me</i>
<i class="fas fa-envelope-square icon"> Email me</i>
<i class="fab fa-linkedin icon"> Linkedin</i>
</p>
<p>Click here to visit my Profile
</p>
</contact-section>
</body>
</html>
You could set your section to height: 100vh; to make it the full height of your viewport.
In combination with display: block; it will work.
welcome-section {
height: 100vh;
width: 100%;
display: block;
}
How to add line break in tooltip
I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code
http://codepen.io/apps4any/pen/RWQLyr
Html
<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
<md-content layout-padding="">
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>
List1<br>
List2<br>
List3<br>
List4
</md-tooltip>
</md-button>
<div style="margin-top: 150px;">
</div>
</md-content>
</div>
CSS:
.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
box-shadow: none;
border: none;
transform: none;
-webkit-transform: none; }
.tooltipdemoBasicUsage .left {
top: 70px !important;
left: 56px !important; }
.tooltipdemoBasicUsage .right {
top: 70px !important;
right: 56px !important; }
JS
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
$scope.demo = {};
});
Adding this CSS seems to work in your case (with the <br>s):
md-tooltip .md-content {
height: auto;
}
I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.
Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline, so you can target it in CSS:
md-tooltip.tt-multiline .md-content {
height: auto;
}
Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.
In this case use
md-tooltip ._md-content {
height: auto;
}
and for specific class
md-tooltip.tt-multiline ._md-content {
height: auto;
}
Since angular-material version >1.1.2 you can simply override .md-tooltip class: (JsFiddle)
.md-tooltip {
height: auto;
}
And if you want to style a particular tooltip, add a custom class to md-tooltip element:
(jsFiddle)
HTML
<md-tooltip class="tooltip-multiline">
I'm a multiline <br/> tooltip
</md-tooltip>
CSS
.tooltip-multiline {
height: auto;
}
both cases tested in angular-material 1.1.2, 1.1.3 and 1.1.4 versions
Set the max-with's below to what ever you need. Now it will do automatic line breaks or put a <br/>
into it.
md-tooltip .md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
md-tooltip {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
overflow: visible !important;
white-space: normal !important;
}
md-tooltip ._md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
You can view the styling for md-tooltip (v0.11.4) here: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
My own overwrites to the material design styling to allow nice looking multi-line tooltips:
md-tooltip {
font-family: Roboto, 'Helvetica Neue', sans-serif;
.md-background {
border-radius: inherit;
}
.md-content {
height: auto;
width: 400px;
max-width: 400px;
padding: 8px;
white-space: initial;
}
}
#media screen and (min-width: 600px) {
md-tooltip .md-content {
font-size: 14px;
height: auto;
width: 300px;
padding: 8px;
max-width: 300px;
}
}
Or you can use white-space: pre-line; in the custom class of your md tooltip. :)
After a while searching for a solution FROM A VARIABLE CONTENT:
.ts
public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'
.html
<button mat-icon-button aria-hidden="false" class="material-icons-outlined"
[matTooltip]="matTooltipContent"
matTooltipClass="allow-cr"
(click)="onInfoButtonClicked($event)">
<mat-icon >help_outlined</mat-icon>
</button>
.css
.allow-cr {
white-space: pre;
}
See stackblitz example
I am using angular_material 1.1.8, for me single answer didn't work, a combination did.
html
<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>
css
.tooltip-multiline {
height: auto;
white-space: pre-line;
max-width:300px;
line-height: 14px; /*optional*/
font-weight:200;/*optional*/
letter-spacing: 0.5px; /*optional*/
font-size:11px;/*optional*/
}
Hope it helps..
angular material tool tip is warping all content in div so this its working
<md-tooltip class="tooltip-multiline" md-direction="left">
This is tooltip
</md-tooltip>
.tooltip-multiline div{
height: auto;
}
My problem has to do with how mobile browsers seem to be ignoring the border radius attribute when inside a div with overflow:scroll. Below is an example of the problem in a jsfiddle that needs to be opened in a mobile browser. As you scroll you will see that the red boxes poke out of the border-radius corners at the top and bottom of the grey element. If anyone knows of anyway to get rid of this problem, please help! Thanks in advance!
http://jsfiddle.net/Thatguyhampton/LLn74/
html:
<div class="card scrollable">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css :
.scrollable {
box-sizing: border-box;
overflow: auto;
overflow-y: overlay;
position: relative;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.card {
height: 300px;
width: 100px;
background-color: grey;
border-radius: .5em;
}
.content {
height: 50px;
width: 100%;
background-color : red;
margin-top: 10px;
margin-bottom: 10px;
}
Just want to stress that I only see this on mobile browsers.
remove the -webkit-overflow-scrolling: touch; and it will fix it :)
Im trying to make a fluid responsive web that contains an horizontal navbar, my problem is that at a certain width of the browser window the elements of the bar start to relocate one on top each other, is there any way to avoid this behavior in order to make the navbar just stretch until a certain media query break point. I need to website to look al least decent in the ranges where the querys are not activated.
Here's how things look so far:
http://wearehellyeah.com/test/home_formacio.html
<div class="barra">
<!--Menu Principal-->
<nav class="menu-principal">
<ul class="menu">
<li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
<li class="item">Actualitat</li>
<li class="item">Activitat de l'oficina</li>
<li class="item">Vocalies</li>
<li class="item">Formació</li>
<li class="item">Serveis</li>
<li class="item">Actualitat</li>
<li class="item no-border">El Col-legi</li>
<li class="item home">Marcar com pàgina d'inici</li>
<li class="item conectados">Conectados 103</li>
<li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
</ul>
</nav>
<!--Fin Menu Principal-->
<!--Input buscador-->
<div class="buscador">
<form action="">
<input type="text" id="ip-search">
</form>
</div>
<!--Fin de Input Buscador-->
</div>
The CSS:
.barra {
background: #00b1da;
width: 100%;
padding: 0;
}
.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}
.menu {
padding: 0;
margin: 0;
}
.menu .item {
float: left;
list-style: none;
}
.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}
.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}
.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}
.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}
You could add a min-width:
.menu-principal {
min-width:883px;
}
Then it won't go on top of each other. However there are too many options on the navigation bar, you might want to make it a drop-down box when it goes into a mobile media-query range.
e.g. http://vagish.com (as you make the browser width smaller, it changes the navigation bar)
You could have a media query which takes place between 768px and 880px, and reduces the spacing between menu items, and this should be able to make it look fine until you hit the 768px media query.
This would work (along with the CSS above):
#media all and (max-width: 768px) and (min-width: 880px) {
.menu-principal {
padding:0px;
}
.menu-med .item a {
padding:0 .69em;
}
}
I am working with a to client fix a problem on a single page. On all pages, the footer content is positioned and displays properly. However, on this page, when viewed in IE7 the footer content moves up into the body area. The only difference between this page and all the other is the presence of a WooFoo contact form.
I have tried a zillion different ways to bump that content down, but it will not respond to padding or margin adjustments.
Here is the HTML:
<div id="footer">
<div class="width">
<ul class="footerNav">
<li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
<li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
<li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
<li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
<li>Terms of Use |</li>
<li>Privacy Policy</li>
</ul>
<p class="copyright">©2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
4424 Taggart Creek Rd., Suite 111<br />
Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
<strong>F</strong> 704.398.4438<br />
<strong>E</strong> ideas#theideapeople.com </div>
<br class="clear"/>
</div>
</div>
Here is the CSS:
#footer { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold; }
#footer .width { position: relative; margin: 0 auto; width: 960px; }
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li { position:relative; float:left; margin:0; }
.footerNav li a { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }
.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
Any help in resolving this will be greatly appreciated!
Thanks.
The .footerNav element is causing overflow and busting the layout. I even get horizontal scrollbars on my machine, on all browsers.
The following CSS seems to fix it:
.footerNav
{
/* Add clear and float
*/
clear: left;
float: right;
font-size: 15px;
height: 30px;
top: 5px;
/* Delete these 3
position: relative;
left: 770px;
width: 300px;
*/
}