I'm trying to figure out how to make this basic CSS mobile friendly/responsive to browser window changes. Currently, the code displays fine at all sizes except horizontal tablets. Usually pictures and code will drop down to separate rows, but for some reason everything is being displayed on one line and extending past the page borders. I've tried everything from max/min-width and padding to positionand overflow, yet I can't get this one to work.
Here's the important code, the rest of it is just text formatting and effects. The html is basic and just calling .view
.view {
margin-left: auto;
margin-right: auto;
width: 300px;
height: 300px;
float: center;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff
}
.view .mask, .view .content {
width: 300px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
}
.view img {
display: block;
position: relative;
}
This is all done through Squarespace, and they assure me that it's my code causing the issues and not their template code.
What I'm referring to are the picture on this page. Change the size of the page and you'll see what I'm referring to when you hit about 4-6 inches wide. The pictures overlap and a scroll bar forms. There's no spacing between the individual pictures.
Your images are re-sizing because .sqs-col-12 and .sqs-col-4 are set to 33.3333%. If you give them a fixed width (say 320px) they will not collapse down on themselves, but will float down to the next line on a resize.
.sqs-col-12 .sqs-col-4 {
width: 320px;
}
Related
So i'm trying to make a box in which if the content is to big, it only scrolls on the X. I have tried every stack overflow way i have seen, and can't find a answer after days that works.
Here is my HTML:
<div class="outputElement">
<div class="xOutput" style="border-bottom: 1px solid black;"><h1 class="algbra-h1">X: 10432323232323232323232323232323232323232322</h1></div>
<div class="yOutput" style=""><h1 class="algbra-h1">X: 10432323232323232323232323232323232323232322</h1></div>
</div>
CSS:
.outputElement {
background-color: #f5f1ef;
width: 226px;
margin-left: 3%;
border: 1px solid black;
height: 80px;
}
.xOutput,.yOutput{
vertical-align:top;
text-align: center;
}
.xOutput {
overflow-x: scroll;
height: 40px;
}
.yOutput {
width: 226px;
overflow-x: scroll;
font-size: 30px;
}
.algbra-h1 {
font-size: 30px;
}
Now here is what happens when a long number is in the box:
https://postimg.cc/image/5phnvjiot/
Just encase you want to, the project i am using this on is -->
Line 72 HTML & Line 219-243 CSS
https://codepen.io/Mike-was-here123/pen/QrdJdO
It jumps down a line on the Y-axis, then scrolls on the X. Note that its the same thing in both of those boxes. Its two div's onto of each other, inside of a main div.
Here is what i need:
It only to scroll on the X-axis, it cannot jump down a line then scroll.
Here is what i tried:
Making the Y-hidden --> Just hides it, doesn't prevent it, Anything else amounts to the same outcome.
Setting fixed pixel heights to the containing divs is causing the problem. Remove the fixed heights to allow all the text to be visible. The splitting between X and the number is caused by whitespace wrapping. When there isn't enough horizontal space for text, it is broken to the next line at the next whitespace character. The wrapping can be overridden with white-space:nowrap;.
.outputElement {
background-color: #f5f1ef;
width: 226px;
margin-left: 3%;
border: 1px solid black;
}
.yOutput {
width: 226px;
overflow-x: scroll;
font-size: 30px;
}
.xOutput {
overflow-x: scroll;
}
.algbra-h1 {
font-size: 30px;
white-space:nowrap;
}
I'm not sure what you want in the big picture but I did resolve the problem described in the question.
I tried to create a code snippet but things broke since the project seems to use a lot of external libraries. I have instead opted to fork the original codepen.
Note: forked, working example pen removed upon request.
When running my login page on IE 11 with a screen size of less than 700px, the site looks like this:
The space on the right hand side that causes scrollbars that should not exist. I usually would assume that there is something overflowing, but I don't see any content that would cause this behaviour.
Here is a rundown of the page's code:
https://codepen.io/bitz/full/brayEb/
I was thinking that it has something to do with the way I set the width:
html {
height: 100%;
width: 100%;
margin: 0;
background: rgb(90, 103, 113);
font-family: Arial !important;
font-size: 12px !important;
}
But I tried changing it a bit to no effect.
Try to take this off from your CSS
#media only screen and (max-width: 1000px) {
body#login-body
{
background-size: contain;
}
}
Turns out IE does not like transform css at all, so I opted to center the objects in a different way, as outlined here.
Basically:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
Instead of the system that was used in the codepen.
I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.
I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here. On the linked website the images always seem to stay equidistant from the header and footer.When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?
I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.
JS Fiddle: https://jsfiddle.net/pmh9zvta/1/
Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.
Robin,
Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).
Check out this fiddle I made (using your code as a base):
https://jsfiddle.net/Benihana77/5xw21tvc/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
position: relative;
}
body {
position: relative;
margin: 0;
padding-bottom: 100px;
min-height: 100%;
}
#header {
width: 100%;
padding: 10px;
margin-right: auto;
margin-left: auto;
position: fixed;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.92);
text-align: center;
z-index: 1;
}
#gallery-wrapper {
position: relative;
padding-top: 60px;
overflow-x: scroll;
}
#gallery-wrapper img {
height: 70vh;
width: auto;
}
#footer {
font-family: Corda-Light;
font-size: 14px;
color: #333;
width: 100%;
padding: 5px;
padding-top: 13px;
padding-bottom: 8px;
padding-left: auto;
padding-right: auto;
position: absolute;
bottom: 0;
background-color: #efefef;
text-align: center;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* Navigation Bar Styling */
.nav {
border-bottom: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
/* Horizontal Gallery Styling */
ul.gallery-row {
white-space: nowrap;
}
ul.gallery-row li {
list-style: none;
display: inline;
}
/* Footer Styling */
.footer {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Main changes
Added a wrapper around your content for better management (within JSFiddle and out).
Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.
Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).
Chose some more realistic image dimensions to work with, and a shorter vh (70).
Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.
I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.
So, in addition to the above changes, I'd recommend:
Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).
This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?