I'm trying to create a 90 deg rotated layout. But the problem is that none of the method I used to use works in this case. Since it is rotated, changing size, getting it responsive does not seem to work.
I'm trying to let the "My Project" title take half of the rotated screen and the other half will contain
images and containers.
Can anyone help me out with this? How do i make sure that it resizes and placement is always half:half layout without overflow during resize in different device size. Please provide me with a hint to complete my work. Thank you!
Link to the code in jsfiddle.
Here's a link to the think I'm doing:
https://jsfiddle.net/7tfy4gdh/1/
Here's what i want to build: https://prnt.sc/10wb1p7
One way to think of this is to design everything as though it was not rotated and with the container having width 100vh and height 100vw. Then when everything is in place, rotate container by 90 degrees and translate it so it exactly fits within the viewport.
To ensure it is all responsive, use relative units wherever possible. So have widths and heights as %s. Think about padding, possibly define it in terms of vmin and you may also want to define font size relatively so it grows on larger screens.
So, implement this first:
This snippet starts the process, defining a left side div and a right side div, centering the main component of each and rotating and translating the container. It isn't the full job, the logo side needs more work - and you may find defining everything in %s etc that it is better not to use flex but to control the use of the whole space yourself.
And remember that just because something is rotated it does not mean that its height becomes the vertical side...
Here's some code to start things off:
<head>
<style>
* {
box-sizing: border-box;
margin:0;
padding: 0;
overflow: visible;
}
body {
width: 100vw;
height: 100vh;
overflow: visible;
}
.container {
text-align: center;
width: 100vh;
height: 100vw;
transform: rotate(90deg) translateY(-100%);
transform-origin: 0% 0%;
overflow: hidden;
}
.container .left-side {
position: relative;
width: 50vh;
height: 100vw;
float: left;
}
.container .left-side .project-title {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container .project-title span {
text-align: center;
}
.container .right-side {
position: relative;
top: 0;
width: 50vh;
height: 100vw;
float: left;
padding: 1vmin;
}
.container .right-side .control {
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
rmax-width: 450px;
rmin-width: 350px;
height: 80%;
width: 80%;
background-color: red;
padding: 5%;
}
.control .logo {
height: 25%;
}
.control .logo img {
width:100px;
height: 100%;
width: auto;
}
.logo-container {
flex:1;
display:flex;
margin-top: 5%;
height: 30%;
}
.logo-maker{
flex:1;
padding:25px 10px;
background-color: #ccc;
color:#ffffff;
border-radius: 8px;
padding-top: 15px;
}
.logo-maker .maker-contain {
width:50px;
background-color: #ccc;
border-radius: 8px;
padding:5px;
padding-bottom: 0;
margin:auto;
}
.logo-maker .maker-contain img{
width:100%;
}
.logo-maker h3 {
margin-top: 15px;
}
.earn-coin {
flex:1;
text-align: center;
padding:25px 0;
padding-top: 15px;
margin-left: 5px;
border-radius: 8px;
background-color: #ccc;
box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-webkit-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-moz-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
}
.earn-coin img {
width:40px;
margin:auto;
}
.earn-coin h3{
margin-top: 15px;
}
.footer {
padding:20px 30px;
padding-left: 55px;
background-color: #ccc;
background-color: purple;
height: 25%;
color:#ffffff;
border-radius: 5px;
margin-top: 5%;
text-align: left;
}
.footer i{
font-size:35px;
}
.footer h3 {
display: inline;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<div class="project-title">
<h2>
My Project
</h2>
</div>
</div>
<div class="right-side">
<div class="control">
<div class="logo">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/lion-fire-logo-design-template-free-89daa14626ac403bd3cf6282036663ff_screen.jpg?ts=1572094154">
</div>
<section class="logo-container">
<div class="logo-maker">
<div class="maker-contain">
<img src="https://www.logaster.com/blog/wp-content/uploads/2018/05/LogoMakr.png" alt="">
</div>
<h3>Build Logo</h3>
</div>
<div class="earn-coin">
<div class="coin-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEWIhIZ48jnuWwHjIZ9I_EpQbRsHrFtomThQ&usqp=CAU">
</div>
<h3>Earn Coins</h3>
</div>
</section>
<div class="footer">
<i class="fa fa-bell"></i>
<h3>
Build by Dave ___
</h3>
</div>
</div>
</div>
</div>
</body>
Related
I have an <img> and I'm giving it a background-color, a padding along with a border-radius.
The problem is that even though I have a padding and so there's a lot of space between the inner image and the edges of the box, the border-radius apparently gets applied to the image inside as well, and therefore causes the edges of the inner image to be cut off. Here's what it looks like:
https://i.stack.imgur.com/tYKfh.png
.element img {
padding: 25px;
border-radius: 50%;
background-color: #6e4fff;
height: 30px;
width: 30px;
}
<div class="element">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>
Move the styling to the parent element, take out the padding, and center with flexbox:
.valueelement {
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.valueelement img{
height: 30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>
Another solution:
.valueelement img {
height: 30px;
margin: 0 auto;
display: block;
}
.valueelement {
padding: 25px;
background-color: #6e4fff;
border-radius: 50%;
overflow: hidden;
height: 30px;
width: 30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>
Simply use the calc method when positioning your image in conjunction with display:block and position:absolute. Formula: calc(50% - imageWidth/2), then do the same for the height.
JsFiddle: https://jsfiddle.net/h867qgcL/
.valueelement {
position:relative;
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
min-width:80px;
width:80px;
}
.valueelement img {
position: absolute;
padding:0;
display:block;
margin-left:calc(50% - 13px);
margin-top:calc(50% - 15px);
height:30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png"/>
</div>
I've achieved the result I want. But it's not the correct way to do it. For example if my parent container ever changes widths, this hack won't work. However I did this just to get it on the screen to try and resolve the correct way in the browser.
See screenshot here
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="product-wrapper">
<div class="product-card">
<img src="../assets/img/46-455.jpg" alt="">
<h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
View Product
</div>
</div>
</div>
</div>
</div>
Sorry about my wacky spacing. For some reason pasting out of Sublime Text 3, everything is all jacked up once it comes here.
Related CSS
.product-img-wrapper {
text-align: center;
}
.product-img-wrapper img {
width: 200px;
height: 200px;
}
.product-wrapper {
position: relative;
margin: 50px 0;
}
.product-card {
position: relative;
max-width: 330px;
height: 450px;
border: 1px solid #eee;
margin: 25px auto 0 auto;
text-align: center;
padding-left: 20px;
padding-right: 20px;
box-shadow: 7px 7px 5px #838485;
}
.product-card .btn {
position: absolute;
min-width: 200px;
bottom: 15px;
left: 60px;
}
use this on your .btn instead. This will make your btn center horizontally.
css3: translateX to center element horizontally:
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
As I said in my comment, make a wrapper for the button and position:absolute; that to the bottom. Then as long as you remove the styles from the button, it'll center itself because the wrapper has text-align:center; on it.
.product-img-wrapper {
text-align: center;
}
.product-img-wrapper img {
width: 200px;
height: 200px;
}
.product-wrapper {
position: relative;
margin: 50px 0;
}
.product-card {
position: relative;
max-width: 330px;
height: 450px;
border: 1px solid #eee;
margin: 25px auto 0 auto;
text-align: center;
padding-left: 20px;
padding-right: 20px;
box-shadow: 7px 7px 5px #838485;
}
.product-card .card-bottom {
position: absolute;
bottom: 15px;
width:100%;
left:0;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="product-wrapper">
<div class="product-card">
<img src="../assets/img/46-455.jpg" alt="">
<h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="card-bottom">View Product</div>
</div>
</div>
</div>
</div>
</div>
I am building this website and created a nice layout for what I need. However on a smaller (laptop) screens the content is higher than the screen, and it does not allow one to scroll up and down. Instead it keeps showing the exact center of my content.
How would I add a scroll-bar to the entire page, so people are not fixed to the center of the page only ?
My current css:
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#maincanvas{
position:fixed;
top: 50%;
left: 50%;
width:700px;
height:800px;
/* background: background="static/bg02.png";*/
/*border: 15px solid #cc0000;*/
padding: 25px;
transform: translate(-50%, -50%);
}
#logobox{
position:absolute;
top: 0px;
left: 50px;
width:600px;
height:50px;
/*border: 10px solid #cc0000;*/
padding: 25px;
}
#contentbox{
position:absolute;
top: 200px;
left: 50px;
width:600px;
height:400px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerbox{
position:absolute;
bottom: 10px;
left: 50px;
width:600px;
height:30px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerlogo{
overflow:hidden;
position:fixed;
bottom: 30px;
right: 5px;
background: #f5f5dc;
border: 10px solid #cc0000;
overflow: hide;
width:250px;
height:30px;
padding: 25px;
}
/*input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}*/
input[type=text]:focus {
border: 3px solid #555;
}
.widthSet {
max-width: 150px;
position:fixed;
bottom: 35px;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
</style>
The site content:
<body background="static/bg.png">
<div id="maincanvas">
<div id="logobox">
</div>
<div id="contentbox">
$:content
</div>
<div id="footerbox">
</div>
</div>
</body>
I have tried playing with different overflow settings, however so far, didn't manage the result I am after. With overflow I can only scroll the content of the boxes, however what I need is to scroll the site (canvas?)
Hoping this is not a duplicate, as I did search, but maybe lack the exact keyword to search for.
The issue you're running into is the use of position: fixed;.
From MDN regaurding fixed positioning.
Fixed Positioning: Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So adding scroll to an overflow property won't do anything. The element with fixed positioning isn't taking up any space and will always be positioned relative to the viewport in some way.
What you want is position: absolute; and a modification to your top attribute for smaller screens.
#maincanvas {
/* Note: we could use margin: 0 auto; to center but on larger screens we need left and top set to center inside viewport */
position: absolute;
left: 50%;
width: 700px;
height: 800px;
padding: 25px;
transform: translateX(-50% );
}
#logobox {
position: absolute;
top: 0px;
left: 50px;
width: 600px;
height: 50px;
border: 10px solid #cc0000;
padding: 25px;
}
#contentbox {
position: absolute;
top: 200px;
left: 50px;
width: 600px;
height: 400px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerbox {
position: absolute;
bottom: 10px;
left: 50px;
width: 600px;
height: 30px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerlogo {
overflow: hidden;
position: fixed;
bottom: 30px;
right: 5px;
background: #f5f5dc;
border: 10px solid #cc0000;
overflow: hide;
width: 250px;
height: 30px;
padding: 25px;
}
/* When viewport is large enough to start centering #main */
#media (min-height: 800px) {
#maincanvas {
top: 50%;
transform: translate( -50%, -50% );
}
}
<div id="maincanvas">
<div id="logobox">
</div>
<div id="contentbox">
$:content
</div>
<div id="footerbox">
</div>
</div>
For what it's worth, there's a lot to be desired in your markup. You don't need all the absolute positioning you're using. Try and re-use styles if you can. Here is one way you could simplify things.
Note: I replicated your margins on the DIVs inside #main which will create a horizontal scrollbar on narrower viewports. Not sure what is intended here. Perhaps some styling on #main that was not provided in post?
#main {
position: absolute;
left: 50%;
width: 700px;
height: 800px;
padding: 25px;
transform: translateX(-50%);
}
#main > div {
margin: 0 50px 50px;
padding: 25px;
background: #f5f5dc;
border: 10px solid #C00;
}
#main > div:last-child {
margin-bottom: 0;
}
#logo {
height: 50px;
}
#content {
height: 400px;
}
#footer {
height: 30px;
}
/* When you know the viewport is large enought to try and center ALL of #main */
#media (min-height: 800px) {
#main {
top: 50%;
transform: translate(-50%, -50%);
}
}
<div id="main">
<div id="logo"></div>
<div id="content">
<p>
Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
</p>
</div>
<div id="footer"></div>
</div>
This is the code you want to have in your css. Try this and it will look a lot better. You can move the div's itself with the margin-top.
#maincanvas{
margin-top: 15%;
margin-left: 50%;
width:700px;
height:800px;
padding: 25px;
transform: translate(-50%, -50%);
}
Try it!
So, I have a main container that shows like the following:
I want to be able to adapt the parent div to the number of child's it receives. Let's say we remove div2. The result should be something like this:
Instead, the parent div does not stretch to the width of the div child's
Here's my code:
HTML:
<div class="main-container">
<!-- Card container -->
<div class="card-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
</div>
<!-- Footer container -->
<div class="footer">i am a footer</div>
</div>
CSS:
.main-container {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
}
.card-container {
color: #3B3D3D;
height:105px;
float: left;
width: 100%;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
float: left;
width: 100%;
}
.card {
width:100px;
float:left;
}
What am I doing wrong here? I've tried the display: inline-block; solutions out there but since the parent div must be fixed to the bottom, I am not seeing the desired result.
Any help will be precious.
Thanks in advance.
Try this https://jsfiddle.net/2Lzo9vfc/136/
You can try to remove one .card on click and see what hapens here https://jsfiddle.net/2Lzo9vfc/138/
CSS
.main-container {
position: fixed;
margin: 0 auto;
left: 50%;
bottom: 0;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
display: inline-block;
transform: translateX(-50%);
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
width: 100%;
}
.card {
width:100px;
height:105px;
display: inline-block;
}
HTML
<div class="main-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
<div class="footer">i am a footer</div>
</div>
Here you go: http://codepen.io/n3ptun3/pen/PPgWNb
You don't need to use display: inline-block.
I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%;. They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.
On the .main-container, you can't set margin: 0 auto; and position: fixed;. position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.
Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, i.e. the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.
Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
}
.card {
width: 100px;
float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container. When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container. This will allow you to increase the width of the "cards" while keeping them from stacking.
I've updated the code here: http://codepen.io/n3ptun3/pen/PPgWNb
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
display: flex;
}
.card {
width: 100px;
// float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
I created two buttons on my site that I plan to turn them into images when you hover over them. The problem that I ran into is that after hovering, the image does not quite fit inside the box (it is too big). How do I resize it so that it properly fits inside the box upon hovering over them?
Here is the HTML:
<a href="link.html">
<div class="main-button">
<h2 class="main-text">Maintenance</h2>
</div></a>
<a href="link2.html">
<div class="docs-button">
<h4 class="docs-text">Other Documents</h4>
</div></a>
and the CSS:
.main-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #0099DF;
margin-left:100px;
float:left;
}
.main-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:40px;
margin-top:150px;
}
.docs-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #545454;
margin-right:100px;
position:fixed;
right:30%;
float:center;
}
.docs-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:60px;
margin-top:120px;
}
.main-button:hover {
background-image:url('../images/settings.png');
}
.docs-button:hover {
background-image:url('../images/documents.png');
}
Try background-size:cover - e.g.
.main-button:hover {
background-image:url('http://placekitten.com/200/300');
background-size:cover;
}
.docs-button:hover {
background-image:url('http://placekitten.com/g/200/300');
background-size:cover;
}
background-size:contain if you want to see all image, or 100% 100% to take 100% width and 100% height but in this case your image could be shell
Hello TheOrangeRemix,
I have a viable solution to you problem. My first step would be to look at the properties of you image and get the dimensions e.g. 100x100, 255x100, etc.
From here you will want to convert that ratio into a percentage. This is a tool I often use when calculating ratio percentages: Ratio to Percentage Calculator
Once you have your percentage (I'm going to use 1:2, which gives me the percentage of 50%). You want to create an anchor tag (<a>) and give it some styles:
(Note: this may be slightly overengineered but it does what you want it to.)
html, body {
width: 100%;
height: 100%;
background: #000;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
max-width: 400px;
margin: 0 auto;
background: #fff;
}
.mainButton {
display: inline-block;
padding-top: 50%;
width: 100%;
background: url('https://via.placeholder.com/100x50');
background-size: 100% 100%;
position: relative;
}
.mainButton .text {
font-size: 22px;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrapper">
<a href="/somewhere/something" class="mainButton">
<span class="text">
Hello, I am a button.
</span>
</a>
</div>