I began designing a mobile first website. First ever paid website!! I'm not using Bootstrap until I master flexbox, so don't say use bootstra//templates :) I'm having problems as my site looks good when viewed mobile, but looks like crap when viewed on a large screen.
A specific problem I'm having is a 2x7 row/column grid, the words spill out of the container, but fit fine with mobile view on.
This is not specific to chrome.
How do I make flexbox mobile friendly? Is it simply flex-grow/shrink? I find it odd that my divs need to shrink as the screen gets larger, and they def shouldn't get any bigger..and If I make the white portion of the div a larger VH it will also "fix" it. But that seems counter-intuitive...On a bigger screen I must make the container an even greater % just to fit the same size font??
Or is this a media query thing...and if so what would it be? Media Query's making fonts smaller seems wrong, I'm looking for the best way/best practice not a work around if possible :)
MY CODE:
HTML5:
<div class="s2-row" >
<div class="s2-columns center">Talent Management</div>
<div class="s2-columns center">Athlete & Artist Development</div>
<div class="s2-columns center">Booking Talent</div>
<div class="s2-columns center">Negotiating Booking Rights</div>
<div class="s2-columns center">STravel Logistics</div>
<div class="s2-columns center">Sound</div>
<div class="s2-columns center">Lights</div>
<div class="s2-columns center">Backline Equipment</div>
<div class="s2-columns center">Venue Selection</div>
<div class="s2-columns center">Event Set-Up & Contracting</div>
<div class="s2-columns center">Sponsor Mangement</div>
<div class="s2-columns center">Promotional Negotations</div>
<div class="s2-columns center">Complete Event Presentations</div>
<div class="s2-columns center">Rider Requirements</div>
<div class="s2-row2 center">As well as many other event specific
needs</div>
</div>
CSS3:
div.s2-row {
display: flex;
flex-wrap: wrap;
line-height: 2;
text-align: center;
margin-bottom: 50px;
}
div.s2-columns {
flex-basis: 50%;
}
h3.s2-row2 {
text-align: center;
width: 100%;
margin-top: 15px;
font-weight: 600;
font-size: 30px;
}
.center {
align-self: center;
}
Desktop View
Mobile View
Thank you in advance!
(2nd pic is how it looks on mobile)
I settled with simply making the container elements vh bigger. I think I could've messed with flex-shrink/grow or media queries as well but I kept it simple.
Related
I am trying to make a collapsible grid on bootstrap to show details of each item:
Here is a link to a picture to show the main idea.
I have been following the following thread which has been very useful: https://www.codeply.com/go/TLJi5MxQ1E
However they way that their html is coded, each row on small screen must be a factor of each row on a large screen (eg. 4 rows on screen --> 2 rows on a small screen)
What I am trying to do is to have 3 increments: 3 columns, 2 columns, and 1 column and I am unable to figure out how to make it work. Any help will be appreciated
a few things:
You should add what you have tried to accomplish this instead of just coming here for someone to write code for you.
With that said, I used to do the same thing occasionally in my earlier questions, so i have decided to help you.
here is the solution for desktop (without bootstrap) keep in mind bootstrap is dynamic and will adjust your content to screen size on tablet, desktop or mobile.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#container {
display: flex;
flex-direction: column;
border: 2px solid grey;
}
.row {
display: flex;
align-content: center;
justify-content: center;
}
img {
height: 200px;
width: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div class="row">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
</div>
<div class="row">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
</div>
<div class="row">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
</div>
</div>
</body>
</html>
if you want to customize this further, you will need to familiarize yourself with media queries in CSS. you can write rules for displaying 2 per row, or 4 per row, or whatever per row, based on your own logic.
with the code here and some research on media queries, you will be able to accomplish this.
IF...you update your question with some code, and what you have tried (i have given you code and pointed you in the right direction) I will be happy to comment or help.
Cheers
Description:
I'm having an issue with my website's footer blocking content on mobile browsers (and on longer pages on desktops).
I've seen threads about this before, but these focus on hiding the footer until the user scrolls all the way down. I want to have the footer "float" below the content, but have it go below the content when the user scrolls all the way down the page. I also need this to allow clicking on items right above the footer. On my site, you can't click on a button, even if it's a few lines above the footer - which needs to also be fixed.
Examples:
You can view an example of this issue at my own site: http://mbt.aeio.io/twitter.php
Note that when you scroll all the way down, it is impossible to click "Load More Tweets", even on desktops, where the button is clearly visible.
I cannot find an example of what I'm trying to accomplish; that's why I'm posting about this -- and not just copying someone else's code.
Code:
This is my code for ARRANGING the footer:
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
This is my ACTUAL code for the footer:
<div class="footer">
<div class="content">
<div class="container" style="
/* display: inline-block; */
">
<div class="well animated slideInUp" style="
display: inline-block;
">
<center>Developed with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> by mario_bros_tech, Arkagaen, and Others | Copyright © 2015-2017 | All Rights Reserved</center>
</div>
</div>
</div>
</div>
I know this is super-janky and that I shouldn't be using containers to make a footer, so if you have any suggestions for improving/cleaning up the code too, that would also be appreciated.
And if you need to look at the CSS for whatever reason, it is using Bootstrap and can be found here: http://mbt.aeio.io/assets/css/
Thanks for all the help!
The best thing (and the right thing) to do is to give some bottom padding to body. Giving the following code:
body {
background: #eee;
padding-bottom: 75px;
}
We get this:
I am currently working on a responsive framework which contains a section that has max. 3 columns when the browser is not scaled. I use Pseudo selectors (nth) with these column to change the height of the odd divs. The responsiveness works like a charm, no problem there. The odd/even divs work fine, it behaves perfectly even when scaled down.
My problem is this:
I made a listview with divs because the intention was to make the even and the odd divs fit one below the other and next to each other seamlessly with negative top margins. That does not seem to work unfortunately. there are gaps that I can't seem to get rid of.
A mockup to clarify my intentions:
Example
I would like to have a full css solution for getting rid of the gaps but i'm afraid that's not possible unless there's something i'm totally missing.
Html:
<section class="home">
<p>It's <span id="demo"></span> today</p>
<div class="work">
<div class="work_col-1-3">test1</div>
<div class="work_col-1-3">test2</div>
<div class="work_col-1-3">test3</div>
<div class="work_col-1-3">test4</div>
<div class="work_col-1-3">test5</div>
<div class="work_col-1-3">test6</div>
<div class="work_col-1-3">test7</div>
<div class="work_col-1-3">test8</div>
<div class="work_col-1-3">test9</div>
<div class="work_col-1-3">test10</div>
<div class="work_col-1-3">test11</div>
<div class="work_col-1-3">test12</div>
</div>
</section>
CSS
#media only screen and (min-width: 35em) {
.work_col-1-3 {
position:relative;
width: 33%;
height: 200px;
background-color:purple;
display:inline-block;
margin:-2px;
}
.work_col-1-3:nth-child(odd) {
position:relative;
background-color:orange;
margin:-2px;
height:300px;
}
Also here's a fiddle. The fiddle contains just the 3 column part of the css but it should fit in every state. ( 3-column, 2-column & 1-column but the 1 column is working already)
http://jsfiddle.net/Vishumahabir/tB7Aw/
The "section" element is a child object in an "article" element.
Any thoughts? Thank you!
If the heights are set then you can use the following to do it, though it's very ugly especially if you add more elements
.tmcwork_col-1-3:nth-child(2n + 5), /* Select oranges after first line */
.tmcwork_col-1-3:nth-child(2n + 8) { /* Select purples after second line */
top:-100px;
}
.tmcwork_col-1-3:nth-child(2n + 11) { /* Select oranges after third line */
top:-200px;
}
Demo
If the heights vary or you have a lot more elements it'd be easier to look at an existing one and use a similar technique as them
I have a web page with questions on it. I want the user to be able to use a 7" Android tablet (with Chrome) to answer the questions. Some people will want to zoom. Some will not.
How can I get the div container to resize (wrapping the text inside the borders of the screen) when the user zooms in or out? I tried this:
.resizcontainer {
width: 90%;
background: #CEE;
margin: 0 auto; /* the auto value on the sides, */
}
with the top of the code as this:
<body>
<div class="resizcontainer" style="border: thin black solid">
<div class="header">
<h2>Risk Assessment Test</h2>
</div>
<div class="content">
I'm not sure if it matters, but Chrome on the desktop does the job just fine. The container resizes just fine. Or is it because this is a form???
For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.
No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.
The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.
Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.
Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);
Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.
The rough HTML I have right now is something like this:
<table id="portfolio">
<tr>
<td>
<div class="portfolioItem">
<div class="portfolioItemImage">
<a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
</div>
<br clear="both" />
<div class="portfolioItemDescription">
<h3>Title</h3>
<p>Description lorem ipsum etc.</p>
</div>
</div>
</td>
</tr>
</table>
Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn't relevant here.
Here is the CSS associated with it:
#portfolio {
width:100%;
}
#portfolio td {
width:33%;
}
#portfolio .portfolioItem {
border: 1px solid #000;
}
#portfolio .portfolioItem .portfolioItemImage {
margin:0px;
padding:0px;
}
Again; can this be done? And how?
Thank you!
I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.
I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }
I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.
The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.