I'm using Bones theme from Themble, which includes a grid system in it's style. I have tried to implement it in the header for my menu items so that they will size down into icons in mobile size and show the full menu in desktop screens.
The problem is that I can't get the grid to work, all the menu items float next to each other, on all screen sizes. The divs 'menubar' is only as big as the icon.
The grid is working on other areas, such as the sidebars and content areas. I'm not really familiar with responsive columns so hopefully it's obvious to some of the pros here.
Also, so you know, I'm working locally with koala, a processor for the Sass.
Header
<body <?php body_class(); ?>>
<div id="container">
<header class="header" role="banner">
<div id="inner-header" class="wrap ">
<div id="logo" class="menubar m1of5 t1of5 d2of6 cf">
<img src="/home_icon.png">homepage
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<img src="/icon.png"/>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<img src="/icon.png"/>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<img src="/icon.png"/>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 last-col cf">
<img src="/icon.png"/>
</div>
</div>
</header>
Grid
#mixin grid-col {
float: left;
padding-right: 0.75em;
}
// the last column
.last-col {
float: right;
padding-right: 0 !important;
}
#media (max-width: 767px) {
.m-all {
#include grid-col;
width: 100%;
padding-right: 0;
}
.m-1of5 {
#include grid-col;
width: 20%;
}
}
And on and on for other sizes and screens.
Style
This is the mobile styling....
.header {
width:100%;
position: fixed;
background-color: $white;
border-bottom: 2px solid $border-color;
}
.menubar {
float: left;
}
#logo {
font-size: 0px;
a {
text-decoration: none;
}
}
#menu-icon {
background-color: $light;
border-radius: 4px;
}
<div id="logo" class="menubar m1of5 t1of5 d2of6 cf">
<img src="/home_icon.png">homepage
</div>
Your class names should be hyphenated:
<div id="logo" class="menubar m-1of5 t-1of5 d-2of6 cf">
<img src="/home_icon.png">homepage
</div>
Related
I'm trying to build an image gallery with description below the image. Every thing run well except when i added in a longer description, the second row goes misorder.
How to overcome this issue?
my testing site is : http://osakaairport.com/airlines/index.htm
below is the sample code: (short code due to limited by stack overflow)
<style>
#media only screen and (max-width: 500px) {
.responsive-main {
width: 100%;
}
}
*{
box-sizing: border-box;
}
.responsive1 {
padding: 0 6px;
float: left;
width: 19.99999%;
}
#media only screen and (max-width: 500px) {
.responsive1 {
width: 32%;
}
div.desc1 {
padding-top:3px;
padding-bottom:10px;
text-align: center;
font-size: 12px;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="responsive1">
<div class="gallery1">
<a href="china_airlines/index.htm">
<img src="../images/airlines/china_airlines_logo.png" alt="China Airlines"></a>
<div class="desc1">Japan Airlines Japan Airlines</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/airasia_indonesia.png" alt="airasia indonesia"> </a>
<a target="_blank" href="../facilities/wifi.htm">
<div class="desc1">All Nippon Airways</a></div>
</div></div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/cebu_pacific.png" alt="cebu pacific">
</a>
<div class="desc1">Peach</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/china_airlines_logo.png" alt="china airlines">
</a>
<div class="desc1">9 Air</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/china_eastern_airlines.png" alt="China Eastern Airlines">
</a>
<div class="desc1">AirAsiaX</div>
</div>
</div>
<div class="clearfix"></div>
One way to tackle this is to set the following to class responsive1.
<style>
.responsive1{
padding: 0 6px;
width: 19.6%; // adjust your width accordingly base on your demand
display: inline-block; // behave as block elements inside, but inline elements outside, just like the behavior of characters
// no need to use float:left in this case
vertical-align: top;
}
</style>
I'm having some trouble with this not running properly. It won't align the text correctly and it also won't distribute the cells across the available space. Not sure what I'm doing wrong here, so any help would be appreciated.
While we're at it, I'm also trying to figure out how to get it to show 2 columns instead of 1 when it switches to mobile sized. The way it's setup now, it just transitions to 1 column.
This is for a website on Shopify that uses an html block to insert custom code. I have other blocks that I've inserted into it and they all seem to be working fine, it's just this one that's giving me issues.
.table2 {
display: table;
}
.table-row2 {
display: table-row;
}
.table-cell2 {
display: table-cell;
vertical-align: top;
width: 20%;
padding: 2.5%;
}
.icontext {
display: text;
vertical-align: middle;
width: 20%;
padding: 2.5%;
float: middle;
}
#media screen and (max-width: 768px) {
.table2,
.table-row2,
.table-cell2 {
display: block;
width: 100%;
float: middle;
}
}
<h1><center>Materials</center></h1>
<div class="table2">
<div class="table-row2">
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/0ce94db3-8b05-4d84-a64c-dc6de006151c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Durable
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/b6ff1bd5-4c2e-4db0-bacc-3aa76678e92c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Quick Dry
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/e09a4c7e-c262-415f-b491-599bd0bc3a66/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Lightweight
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/03df04db-7851-4f80-ad8f-0438cc7e0397/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Breathable
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/8034c6ad-6c30-406d-8865-a4bdb4060bca/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Moisture Wicking
</div>
</div>
</div>
</div>
I would recommend using flex something like below will fix your issue. There was a few issues with your previous code being out of date. This will also flex on mobiles to show 2 columns as you stated.
.table-row2 {
width: 100%;
height:auto ;
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content:space-around;
}
.table-cell2 {
vertical-align: top;
padding: 2.5%;
}
.icontext {
padding: 2.5%;
text-align: center;
}
#media screen and (max-width: 768px) {
.table2,
.table-row2,
.table-cell2 {
// removed all
}
}
<meta name="viewport" content="width=device-width" />
<h1><center>Materials</center></h1>
<div class="table2">
<div class="table-row2">
<div class="table-cell2">
<img src="https://ucarecdn.com/0ce94db3-8b05-4d84-a64c-dc6de006151c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Durable
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/b6ff1bd5-4c2e-4db0-bacc-3aa76678e92c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Quick Dry
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/e09a4c7e-c262-415f-b491-599bd0bc3a66/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Lightweight
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/03df04db-7851-4f80-ad8f-0438cc7e0397/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Breathable
</div>
</div>
<div class="table-cell2">
<img src="https://ucarecdn.com/8034c6ad-6c30-406d-8865-a4bdb4060bca/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Moisture Wicking
</div>
</div>
</div></div>
I'm sorry if I'm not using the correct terminology, I'm new to this. I want to stack two divs side by side horizontally, the image and the message content. I have coded a messaging UI.
It all worked fine until I wanted to ad the users image next to the message. I have tried adding display: inline-block; to both divs (the image and message content) but that didn't help.
I'm not sure what else I can do, unless I just use bootstraps grid system, which seems overkill.
https://codepen.io/anon/pen/pxZygr
clear:both; prevents elements from floating next to one another. Your style rule .message-holder .message-to { clear: both; } is affecting the elements you want to display inline. Here's a helpful readup I found on floats and clear: both.
One way I can think of this working would be to have each value implemented as a table element. Something like...
<table>
<td>
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
</td>
<td>
<div class="message-content message-to">
Hey man, how was your day after?
</div>
</td>
</table>
Wherever you have class message-holder, add class d-flex
html,
body {
height: 100%;
}
.messages-wrapper {
padding: 20px 20px 0px 20px;
height: 100vh;
}
.pull-right {
float: right !important;
}
.message-holder .message-to {
float: right;
clear: both;
}
.message-content {
max-width: 300px;
padding: 12px 15px 12px 15px;
border-radius: 3px;
margin-bottom: 10px;
}
.message-image {
clear: both;
}
.message-image img {
width: 40px;
border-radius: 100%;
}
.message-picture img {
width: 20px;
height: 20px;
}
.message-to {
background-color: #161616;
color: #fff;
float: right;
}
.message-from {
background-color: #ebebeb;
float: left;
}
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<div class="messages-wrapper">
<div class="message-holder d-flex">
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-to">
Hey man, how was your day after?
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-to">
Can you also bring your charger when you come round?
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-from">
It was alright, I'll tell you all about it later! No problem, I'm on my way now.
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-from">
ffff
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-to">
Hey man, how was your day after?
</div>
</div>
</div>
I am pretty new to the responsive grid concept in HTML/CSS. I am trying to design a webpage using this concept. for the header I have a picture and some text.
<header class="section group">
<div class="section group">
<div class="picture col span_1_of_4">
<img class="headimg" alt="shoo" src="shoo.png">
</div>
<div class="header-text col span_1_of_4">
<p>Hi and welcome to the Tasty Recipies website!</p>
</div>
</div>
</header>
Now to my question, I want to implement the webpage to use the first and last column of the span. So, on a regular resolution screen, I want the picture to be on the far left, and the text on the far right.
On a smaller screen where only 2 columns fit, I want them next to each other, and on an even smaller screen, I want them below each other.
Any suggestions?
EDIT:
div.picture{
background-color: #4A96AD;
float: left;
height:100%;
border-right:3px solid #7D1935;
}
/*CSS FILE*/
div.header-text{
font-weight:bold;
text-align:right;
}
With your code here on SO, floating works fine:
https://jsfiddle.net/zkzjsgxr/1/
div.picture{
background-color: #4A96AD;
float: left;
height:100%;
border-right:3px solid #7D1935;
}
/*CSS FILE*/
div.header-text{
font-weight:bold;
float:right;
}
Working with 3 examples simulating sizes:
div.picture{
background-color: #4A96AD;
float: left;
height:100%;
border-right:3px solid #7D1935;
width: 40px;
}
div.header-text{
font-weight:bold;
text-align:right;
width: 40px;
}
.float-right{
float: right;
}
.float-left{
float: left;
}
div.section{
clear: both;
}
/* don't copy this css, just examples*/
div.section:nth-of-type(1){
width: 400px;
margin: 0 auto;
}
div.section:nth-of-type(2){
width: 90px;
margin: 0 auto;
}
div.section:nth-of-type(3){
width: 50px;
margin: 0 auto;
}
<header class="section group">
<div class="section group">
<div class="picture col span_1_of_4 float-left">
div1
</div>
<div class="header-text col span_1_of_4 float-right">
div2
</div>
</div>
<div class="section group">
<div class="picture col span_1_of_4 float-left">
div1
</div>
<div class="header-text col span_1_of_4 float-right">
div2
</div>
</div>
<div class="section group">
<div class="picture col span_1_of_4 float-left">
div1
</div>
<div class="header-text col span_1_of_4 float-right">
div2
</div>
</div>
</header>
For the smallest one, I would use mediaqueries if you don't like the effect.
I've set up some features boxes on my home page, however the background image .../images/darker.png is only showing on the left of the image, leaving the remains of the box transparent.
Here is my CSS code for my Home-Boxes:
/* Features Area */
.box { background-repeat: repeat-y; background-position: 0 0; }
.box .box-b { background-repeat: no-repeat; background-position: 0 bottom; }
.box .box-t { background-repeat: no-repeat; background-position: 0 top; }
.home-box {
float: left; display: inline; width: 314px;
background-image: url(images/darker.png);
margin-right: 19px;
}
.home-box .box-b { background-image: url(images/darker.png);}
.home-box .box-t { background-image: url(images/darker.png); padding: 10px 20px; }
.home-box h4 {
font-size: 16px; color: #36429B; font-weight: bold; text-transform: none;
}
.home-box a {
color: #1a8f1d; font-weight: bold; padding-top: 5px; display: block;
}
.home-box img.right { margin-top: 50px; }
.cl {
display: block; height: 0; font-size: 0; line-height: 0;
text-indent: -4000px; clear: both;
}
Here is my HTML for the home boxes..
<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Control Panel</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Powerful Hardware</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Server Mod Support</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Specialized Support</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Migration Assistance</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Hardware Specs</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- end home boxes -->
As you can see the home-boxes are overlapping the footer. The footer should have about a 1 centimeter space above it so nothing overlaps it. Also, the background image for the footer is showing 2 colors but the background of the footer is only supposed to be 1 color.
Here is the image script, please refer to previous code for the image style.
bg-image="/images/darker.png".
I would appreciate any help I could get here.
For further information on this problem, here is a link to my site: http://cudahost.com/new
For the home boxes, you need to set the background to repeat:
.box {
background-repeat: repeat;
background-position: 0 0;
}
In fact, if I understand your problem correctly, the style on the inner div needs changing too. Currently you prevent the background repeating using no-repeat, instead:
.box .box-b {
background-repeat: repeat;
background-position: 0 bottom;
}