I'm working on a responsive picture gallery and I'm looking to modify some code I found. I've made a jsFiddle to show you what I'm working with.
jsFiddle
I want to be able to have a couple buttons below each image in the gallery. As you notice, if there is an image underneath an image the image above has its text cut off. I've thought about adding a margin bottom to .box as such:
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 14.28%;
margin-bottom: 30px;
}
jsFiddle with margin-bottom
I'm wondering if there is a better way to approach this. It seems if you re-size the window too small the text overlaps the images.
You just need to make the bottom padding on .box-container 30px:
.box_container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 10px 30px 10px;
margin-bottom: -35px;
margin-left: 5px;
margin-right: 5px;
}
http://jsfiddle.net/jFwYU/3/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px'Lucida Sans', sans-serif;
}
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 10px;
}
.boxInner img {
width: 100%;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0;
}
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1590px) and (min-width : 1291px) {
/* Large desktop: 5 tiles */
.box {
width: 20%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1920px) and (min-width : 1591px) {
/* Extra large desktop: 6 tiles */
.box {
width: 16.6%;
padding-bottom: 10px;
}
}
1) Removed position:absolute; for boxInner and box_container
2) Avoid using floats and position:absolute; together
3) Only horizontal dimensions should be defined in percentage, not the vertical ones(padding-bottom:33% is not good)
It seems that perhaps the simplest solution for this problem would be to modify the css for the box:
.box {
float: left;
position: relative;
width: 14.28%;
height: 14.28%;
margin-bottom: 40px;
}
height is a much more semantic way than padding-bottom to get what you are looking for, and to make sure the text displays properly (which probably shouldn't be absolutely positioned, but minor issue), add a margin-bottom.
You could also have the margin-bottom as a percent to have it be a percent of the size of the box, say, 20% or so, but px might be a good idea if you're not worried about teeny tiny boxes being an issue (whole gallery less than 50px)
Hope that helps!
I created something to help a college student get started. I adapted your images to the attached code. There are some features that the student needed that you did not ask for, but you can easily remove them.
I believe it meets the intent of preserving the space between images and allows text for each picture. The text is locked to its picture.
The code is not optimized and can certainly be improved, but it will hopefully put you a little closer to what you wanted,
Updated: Example Photo Gallery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photo Viewer</title>
<style>
html {
border: 0 none transparent;
}
body {
padding: 0;
margin: 0;
font-family: arial, tahoma, sans-serif;
font-weight: 400;
font-size: 15px;
background: #FEFADA;
color: #2C2218;
width: 100%;
height: 100%;
border: none;
text-align: center;
font-style: normal;
font-weight: normal;
font-variant: normal;
cursor: pointer;
}
.picture {
/*Add venfor specific property*/
-webkit-column-count: 4;
/*Set the default to 4 columns*/
column-count: 4;
/*Set text line height*/
line-height: 1.5;
/*Add venfor specific property*/
-webkit-column-gap: 15px;
column-gap: 15px;
/*Outer margin for picture container*/
margin: auto 10px;
}
/*Switch to three columns at this display width*/
#media (max-width: 1024px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 3;
column-count: 3;
}
}
/*Switch to two columns at this display width*/
#media (max-width: 764px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 2;
column-count: 2;
}
}
/*Switch to one columns at this display width*/
#media (max-width: 480px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 1;
column-count: 1;
}
}
.hide {
display: none;
}
.img, .selected-img {
width: 100%;
margin: 8px auto;
white-space: nowrap;
}
.selected-img {
max-width: 1024px;
}
.selected {
position: fixed;
margin: 5px auto;
left: 0;
right: 0;
z-index: 10;
display: block;
}
.closeme {
-webkit-align-content: center;
left: 0;
right: 0;
width: auto;
margin: auto;
display: block;
}
.disable {
background: rgba(0, 0, 0, .3);
width: 100% !important;
height: 100% !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
position: fixed;
}
.btn {
border: 1px;
border-color: transparent #D1C89D transparent #D1C89D;
background: #EBE6C1;
height: 40px;
margin: auto 0;
width: 100%;
}
.picture-text {
margin: auto;
padding: 10px 3px;
display: table-cell;
white-space: normal;
}
.inline-block {
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<!-- Hide the selected image window until its needed with the hide class -->
<div id="selectedWindow" class="hide">
<button class="closeme btn" onclick="closeWindow()">Click this Button or on the Selected Image to close window.</button>
<!-- Load the selected image here -->
<img id="selectedImage" class="selected-img" onclick="closeWindow()" />
</div>
<button class="btn" onclick="loadImages()">Load Images</button>
<div id="imageContainer" class="picture" onclick="loadSelectedPicture(event)"></div>
<div id="disableMask"></div>
</div>
<script type="application/javascript">
function loadImages() {
// For DEBUG if you need it: alert("Made it to the function");
var element = document.getElementById("imageContainer");
var imageArray = ["http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg"];
var picture = "";
for (var i = 0; i < imageArray.length; i++) {
// Create an id for each image and add its class.
picture += "<div><img id=\"i" + i + "\" class=\"img\" src=\"" + imageArray[i] + "\"><div class=\"inline-block\"><div class=\"picture-text\">Here is some text for each image. How long can this text be before we have some issues.</div></div></div>";
// For DEBUG if you need it: console.log(picture);
}
element.innerHTML = picture;
}
function loadSelectedPicture(event) {
var target = event.target || event.srcElement;
this.stopEventPropagation(event);
var selectedElement = document.getElementById(target.id);
var imageElement = document.getElementById("selectedImage");
if (!selectedElement.src)
return;
imageElement.src = selectedElement.src;
document.getElementById("selectedWindow").className = "selected";
document.getElementById("disableMask").className = "disable";
}
function stopEventPropagation(event) {
if (!event)
event = window.event;
//IE9 & Other Browsers
if (event.stopPropagation) {
event.stopPropagation();
}
//IE8 and Lower
else {
event.cancelBubble = true;
}
}
function closeWindow() {
document.getElementById("selectedWindow").className = "hide";
document.getElementById("disableMask").className = "";
}
</script>
</body>
</html>
I will try to update this post with a working jsFiddle when I have some free time.
Related
I'm making a RWD table, and using html2pdf to generate pdf file.
And I using media query to change small screen style like:
#media screen and (max-width: 480px) { /*small screen style*/ }
Is there a way can I genetate pdf by small screen, but without media query css?
Please tell me if you have better solution. Thanks!
I thinl i figure it out.
use a specific class for media query than remove it!
https://codepen.io/junjunfan/pen/LYBobgd
function generatePDF() {
const rootNode = document.querySelector("#print_content")
const opt = {
// margin: 10,
filename: 'mypdf.pdf',
jsPDF: { format: 'b4', orientation: 'portrait' },
html2canvas: {
scale: 4,
useCORS: true,
height: 1200,
}
}
$(".container").removeClass("mqcss");
const element = rootNode;
html2pdf()
.set(opt)
.from(element)
.save();
}
document.getElementById('exportPDF').addEventListener('click', generatePDF);
$(".container").addClass("mqcss");
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
position: relative;
}
.container {
background-color: #eee;
position: relative;
width: 80%;
max-width: 800px;
height: 80vh;
margin: 0 auto;
}
.container p {
font-size: 50px;
text-align: center;
}
#media screen and (max-width: 480px) {
.mqcss {
background-color: red;
}
.mqcss p {
font-size: 10px;
color: #fff;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="print_content">
<div class="container mqcss">
<p>RWD Content</p>
</div>
</div>
<button id="exportPDF">generate PDF</button>
I saw some answers for html, but non of them worked for my Rmarkdown.
My goal is to make the sidebar float next to the centered main section while using rmdformats. Or just that sidebar + main are centered.
Requires package rmdformats
With my current files, sidebar remains fixed on the left side, despite the fact that my code should center "content"
.Rmd file:
---
title: "my title"
date: "`r Sys.Date()`"
output:
rmdformats::readthedown:
highlight: kate
---
<link rel="stylesheet" href="mystyle.css"> # css tested in yaml also
mystyle.css :
#content {
margin: 300 auto;
max-width: 800px;
}
#media (min-width: 1400px) {
#content {
width: 1100px;
margin: 0 auto;
}
}
Note: I know that common Rmarkdown mimics a sidebar, next to main.
When screen is small (< 1000px), configuration is close to original. When it gets bigger, (> 1450px) I centered the content horizontally, with the sidebar adjacent to the content (main).
The accompanying effect of the sidebar to the centered main comes from subtracting 300px (sidebar) plus half the content (main) width: 850px/2 (translateX(-725px)), starting from center (left: 50%)
#media screen and (max-width: 1000px){ /*was 768*/
.tablet-hide{
display:none}
#content{
margin-left: 0;
padding: 1em;
}
#content.shift{
position:relative;
min-width:100%;
left:300px; /*was 75%*/
top:0;
height:100%;
overflow:hidden}
#sidebar {
font-size: 120%;
left: -300px;
width: 300px;
}
#content.shift #sidebar {
font-size: 120%;
left: 0;
width: 300px; /* was 75% */
}
#nav-top {
display: inline-block;
}
#postamble {
left:-300px;
}
#postamble.shift {
font-size: 90%; /* was 110%*/
left: 0;
width: 100%; /* was 75%*/
}
#main .nav-pills {
margin-left: 0px;
}
#main .nav-pills li {
margin-left: 10px !important;
}
#main .nav-pills > li > a {
padding: 2px 8px !important;
margin-right: 0px !important;
}
}
#content {
max-width: 850px; /* was 900px*/
}
/* new */
#media (min-width: 1450px) {
#content {
width: 1150px;
margin: 0 auto;
}
#sidebar {
position: fixed;
left: 50%;
width: 300px;
transform: translateX(-725px);
}
}
Based on: Fixed position but relative to container
I was curious to what this code does. I found it on a site, and I am wondering if it has anything to with device optimization. It seems to effect the whole page through all devices. Especially the part that says "#media screen and (min-width:992px)".
<style>
html {
-webkit-font-smoothing: antialiased;
}
.w-container {
max-width: 100%;
}
.w-container .w-row {
margin-left: 0;
margin-right: 0;
}
.w-row {
margin-left: 0;
margin-right: 0;
}
.w-row .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col .w-col, .w-col {
padding-left: 0;
padding-right: 0;
}
.pad-row .w-col {
padding-left: 10px;
padding-right: 10px;
}
.pad-row.w-row, .pad-row .w-row {
margin-left: -10px;
margin-right: -10px;
}
/*---------------------------------*/
.slider-outer {
display: table;
width:100%;
height: 100%;
}
.slider-left, .slider-right {
display: table-cell;
width:50%;
height:100%;
vertical-align: middle;
}
.slider-left {
text-align: right;
}
.slider-right {
text-align: left;
}
/*---------------------------------*/
.w-slider-nav-invert>div {
border: white 3px solid;
background: black;
}
.w-slider-nav-invert>div.w-active {
border: white 3px solid;
background: white;
}
.w-slider-dot {
width: 1em;
height: 1em;
}
/*---------------------------------*/
.table {
display:table;
width: 100%;
}
.t-row {
display:table-row;
}
.t-cell {
display:block;
vertical-align: top;
}
#media screen and (min-width:992px) {
.t-cell {
display:table-cell;
vertical-align: top;
}
}
</style>
I know that this is css, but it seems like clever code to make the page optimizable through all devices. It is in an html embed on this site https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d. You can go in there and double click on an html embed, and the code will be there.
What you're looking at is known as a media query.
The min-width: 992px you see denotes that the CSS inside of it will only trigger of viewports that are at least 992px wide (which is the equivalent of a laptop). You can think of media queries as 'conditional CSS logic' to control how a website looks on different devices.
Note that the media queries pertain to the browser width / height, not the screen width / height. As such, manually resizing your browser window will trigger media query breakpoints.
In this specific case, .t-cell { display: table-cell; vertical-align: top; } is applied when the viewport is at least 992px wide. This will make the content display in a tabular format on larger devices, while the content retains display: block for mobile devices (allowing it to stack).
That's my basic style
#logo {
position: absolute;
background: url('imgs/logo.png');
width: 739px;
height: 195px;
margin: -291px 0 0 133px;
z-index: 5;
pointer-events: none;
}
And I want to change the margin-left to something else based on the media. For example width 100px but it doesn't work.
#media (min-width: 1440px) {
.bc {
padding: 0;
margin: 0 auto;
width: 1150px;
}
.content_table {
width: 1150px;
}
#logo {
position: absolute;
background: url('imgs/logo.png');
width: 739px;
height: 195px;
margin: -291px 0 0 233px;
z-index: 5;
pointer-events: none;
}
}
Out of your comment the first rule (the one with the margin 133px) is after the rule in the #media block.
As both have the same selector for the rule only the order in the css file matters.
Thats why the last rule (the one with the 133px) always overwrites the one in the #media block.
You should place all rules that are not in a #media block at the beginning of your css file and add the #media blocks after those rules.
#media screen and (min-width: 1440px) {
#logo {
}
}
min-width: 1440px is a lot. are you sure you are not trying to check max-width?
I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.
I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.
Here is my css or less css to be precise
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
// Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
#media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
Try adding this to the top of your HTML page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
That should let the mobile browser know that the page you be rendered at the size of your device/browser, instead of faking the screen size of a desktop computer (and thus confusing your media queries).
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/