Materialize Frame Work- overflowing div issue when resizing screen - responsive-design

I am trying to create a div taps using materialize gridding system and I have this problem. The divs overlap and are not position the way I want it to be when I resize the screen. Noted: My laptop screen is 17".
This is what I want the divs to be in all screen size. This appears when I am on large screen size(17").This is what happens when I resize the screen to between medium size and large screen.
Could somebody help me? I appreciate it in advance.
My Html Sample: `
<div class="container" id="Container">
<div class="row" id="Tap">
<div class="col s3 m2 l1" id="Tap1">promotion</div>
<div class="col s9 m10 l11" id="Tap2">upcoming tour</div>
</div>
</div>
My CSS sample:
#Tap {
margin-top: 120px;
}
#Tap1 a {
width: 100%;
padding: 10px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: white;
}
#Tap2 a {
width: 100%;
padding: 10px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: white;
margin-left: 0px;
margin-left: 10px;
}
`

Related

Flexbox template for a draggable list

I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?

Emoji's doesn't render color in my AngularDart project

In an angular dart project I am trying to populate a welcome page with app name and emoji's, but while resulting it doesn't render the color. It's only being populated in black color. kindly help.
app_component.html
<div class="yns-welcome">
<div class="yns-app-icon">{{appIcon}}</div>
<div class="yns-main-header">{{appTitle}}</div>
<div class="yns-sub-header">{{appSubtitle}}</div>
<div class="yns-main-footer">{{appMainFooter}}</div>
<div class="yns-sub-footer">{{appSubFooter}}</div>
</div>
app_component.css
:host {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.yns-welcome {
height: 100%;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
}
.yns-app-icon {
font-size: 125px;
}
.yns-main-header {
font-size: 40px;
}
.yns-sub-header {
padding: 0 0 20px;
font-size: 16px;
}
.yns-login-btn {
background-color: dodgerblue;
margin: 20px 0;
}
.yns-main-footer {
font-size: 12px;
padding: 5px 0 10px;
}
.yns-sub-footer {
font-size: 10px;
}
I see you are using Chromium to load the page. I have seen weird things happen in Chromium before. The emoji renders fine in Chrome, Firefox and Safari on my machine.
Let me know if this helps.
Nick

How to resize a div element automatically so that the content fits

I need to do a lot of divs inside other divs, and I can't seem to understand what is the problem with my code, so the divs do not get the height of the divs below the- and everything is a mess!
my aspx code:
<div class="tabcontent">
<div class="tabcontent-inner">
<div class="tabcontent-inner-left grid_20">
</div>
<div class="tabcontent-inner-right grid_20">
</div>
</div>
</div>
my stylesheet css:
.tabcontent-inner {
width: inherit;
padding: 10px 10px 10px;
margin-top: 10px;
margin-bottom: 1px;
position: relative;
display: block;
}
.tabcontent-inner-left {
padding: 20px 20px;
border-left: solid 1px #ddd;
width: 45%;
float: left
}
.tabcontent-inner-right{
padding: 20px 20px;
border-right: solid 1px #ddd;
width: 45%;
float: right
}
Basically, I want the tabcontent-inner div to get the height of what is inside of it.
this is because on parent .tabcontent-inner you need to put overflow:auto property so that it will cover ups its children's height
you can find more suitable answer here How do you keep parents of floated elements from collapsing?
Add this code to Your CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
and
change
<div class="tabcontent-inner">
to
<div class="tabcontent-inner clearfix">
Semi colons are missing in the css after
float : left
and
float : right

Responsive Design: Floating Blocks

I am curious how to do a specific effect I have seen...
http://hype.co.uk
that being how they get the third smaller column (resize your browser until it pops a third thin column into existence)... The reason this is interesting to me is because you'd think it was in its own column div but when you shrink down to 2 columns the small blocks reflow back into the main floated div list.
So my question... at a certain size, how is it pulling the smaller block elements out into its own column?
Thanks :)
Look at their css (toward the bottom) and you'll see that they're using media queries. This is how you "respond" to a user changing the width of their browser. For something like this, they may just be clearing a floated element or any other number of things. I recommend you check out this: http://www.html5rocks.com/en/mobile/responsivedesign/
Here's a basic example to get you started. Resize the page to see the floated divs being changed:
CSS:
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#content {
width: 290px;
float: left;
padding: 5px 15px;
}
#middle {
width: 294px;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
#sidebar {
width: 270px;
padding: 5px 15px;
float: left;
}
/* for 700px or less */
#media screen and (max-width: 600px) {
#content {
width: auto;
float: none;
}
#middle {
width: auto;
float: none;
margin-left: 0px;
}
#sidebar {
width: auto;
float: none;
}
}
HTML:
<div id="pagewrap">
<div id="content">
CONTENT
</div>
<div id="middle">
MIDDLE
</div>
<div id="sidebar">
SIDEBAR
</div>
</div>

css image sprite hover background conflicts with my text hover

My image sprite works fine as long as I delete my hover text links on the same css page. The hover in the image sprite and the hover in the text link style seem to be conflicting. How do I get the text link styles back? Do I use a separate css for the text link, will it still conflict?
HTML
><div id="page-bg"><img src="x" width="100%" height="100%" /></div>
<div id="container">
<div id="header1">
<ul id="navlist1">
<li id="login"></li>
<li id="getmail"></li>
<li id="quotebtn"></li>
</ul>
</div>
</div>
CSS
>body { color:#333; font-size: 9px; }
#page-bg {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#container {
position: relative;
background: #C35A26;
width: 900px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
#header1 {
width: 900px;
height: 232px;
position: relative;
background-image:url(x)
}
#navlist1 {position:relative;}
#navlist1 li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist1 li, #navlist1 a{height:44px;display:block;}
#login{left:0px;width:94px;}
#login{background:url('x') 0 0;}
#login a:hover{background: url('x') 0 -363px;}
#getmail{left:94px;width:93px;}
#getmail{background:url('x') -94px 0;}
#getmail a:hover{background: url('x') -94px -363px;}
#quotebtn{left:775px;width:125px;}
#quotebtn{background:url('x') -775px 0;}
#quotebtn a:hover{background: url('x') -775px -363px;}
a {
font-family: Arial, Helvetica, sans-serif;
font-size:0.75em;
color: #900;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #900;
}
**a:hover {
text-decoration: underline;
color: #F00;**
}
a:active {
text-decoration: none;
color: #F60;
I got it to work now. All I did was open a blank page and added css to the page properties for links and headers, etc., to see how they layed out the css and re-arranged my css to be like the one that dreamweaver makes as far as where the tags are in order. Anyway, it fixed the problem.

Resources