So im trying to figure out how I could make all of my webpage change size when you zoom in or out at the same proportion. I cant figure out how to do this but here is a little test Fiddle I created in a couple minutes.
https://jsfiddle.net/cejnkx4h/1/
So as you can see in this, whenever the browser/canvas changes size all the text and stuff changes proportion. I want the user to be able to zoom in to accommodate impairments however I want the entire webpage to zoom in at the same proportion, not just certain elements like the text.
If any of you guys can help me I'd appreciate it a lot.
body,
html {
margin: 0;
background-image: url("https://www.hdwallpapers.in/walls/blur_colors-wide.jpg");
background-position: cover;
background-size: 100%;
background-attachment: fixed;
min-width: 1000px;
background-repeat: no-repeat;
}
.bg {
width: 60%;
margin-left: 20%;
background-color: grey;
border: thick solid black;
height: 100%;
}
#right {
width: 45%;
vertical-align: baseline;
border: thick solid black;
}
#left {
width: 45%;
float: left;
font-size: 16pt;
color: black;
padding-top: 20px;
}
.format {
width: 85%;
margin-left: 10%;
overflow: hidden;
padding-top: 5%;
padding-bottom: 10%;
display: flex;
align-items: center;
}
<div class="bg">
<div class="format">
<div id="left">
<p>
Gaming Pc
<br/>$1500
</p>
</div>
<div id="right">
<img src="https://www.cyberpowerpc.com/images/cs/smraidmax/blk_400.png" width="100%" </div>
</div>
</div>
You can use css transform to scale the page proportionally.
transform: scale(1);
Something like this. Where scale 1 means a 100%. You can set it to something like 0.5 for 50% or 1.1 for 110%.
Hope this helps.
Related
I've been following this solution to add responsiveness to my parallax images in my right grid. The responsiveness is working fine except the image doesn't takes up the WHOLE viewpoint.
I have put a red border around the image to show this: https://jsfiddle.net/65r3bth1/3/
When it becomes responsive, the image doesn't fill up the left side of the viewpoint unless I change the background-size and mess around with my background positioning. Is it possible to ensure my image takes up the whole viewpoint while maintaining its responsiveness?
.image-greet {
background: url("http://placekitten.com/g/800/800")
calc(75% + 120px) 50px /120px auto;
/*calc (middle of right grid + how pushed to the rigth) how far push down from top / zoom*/
border-top: 20px;
background-size: 40% auto;
width: 78%;
height: 12%;
margin: 15% auto 0;
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid red;
}
Is it possible to ensure my image takes up the 100% of the viewpoint while maintaining responsiveness in its original background position?
Thank you!
The solution that you are following can be achieved with CSS, without the need for JS, as you can see in this fiddle. Hope this helps!
.body {
display: flex;
}
.container {
border: 1px solid red;
width: 100%;
height: 400px;
margin-top: 50px;
}
.sidebar {
height: 2000px;
width: 50px;
background-color: #333333;
margin-right: 30px;
}
.bg {
background: url('https://loremflickr.com/320/240');
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
display: block;
}
<div class="body">
<div class="sidebar"></div>
<div class="container">
<div class="bg"></div>
</div>
</div>
Okay, so I've got a div tag inside an a tag. The a tag, which has class "project" has a background image. I'm trying to make several little 300px by 300px boxes, in which there is an image, with text centered (vert and hor), so that you'd click the image and it'll take you to a link.
I want to get a hover effect (on desktops) so that when you go over this a tag, which has the image as a background image, the image darkens, making the white text more visible. On mobile, this image is always darkened so the text is clearly visible.
Here's the problem: I have everything working fine, but the "overlay" div within the a tag is not taking up the entire width of the a tag (300px by 300px box). Therefore, when I hover over the a tag, and the "overlay" div turns dark, there's a little space on both sides that is not dark.
Here is some of the code:
HTML for the projects section:
<!-- Projects Showcase Section -->
<div class="projects-section">
<div class="wrapper">
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
</div>
</div>
CSS:
.projects-section {
width: 90%;
margin: 0 auto;
text-align: center;
}
.wrapper {
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.project {
width: 300px;
height: 300px;
background-image: url('../assets/img/p1-min.jpg');
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
margin: 20px 20px 0 20px;
}
.project:nth-child(2) {
width: 300px;
height: 300px;
background-image: url('../assets/img/p2-min.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
}
.project:nth-child(3) {
width: 300px;
height: 300px;
background-image: url('../assets/img/p3-min.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 20px;
}
a {
text-decoration: none;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 30px;
padding: 0 10px;
}
.project .overlay {
height: 100%;
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
transition: 0.4s all ease;
border-radius: 20px;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.5);
}
Here's an image of what the problem looks like:
As you can see, the left and right side of the "overlay" div are not fully expanded to fit inside the a tag, making it obvious there's a div there.
Please help me fix it, thank you.
If you remove the left/right padding on the anchors, and extend the width of your .project elements to 320px, it should look how you want it - though I'm not sure if you have the padding there for some other purpose.
.project {
width: 320px;
height: 300px;
background-image: url('http://via.placeholder.com/300x300');
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
margin: 20px 20px 0 20px;
}
a {
text-decoration: none;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 30px;
padding: 0;
}
http://jsfiddle.net/dtwLjqx4/
I'm working on a mobile responsive design and I'm stuck where I need to show a text in the middle of a circle. The text will be pulled from a database, so the text can sometimes be short or long. I need this text to start at the middle of the inner circle, and if there's more than one line of text, to let the text to go upwards. I've made a JSFille for your convenience. My #child in the CSS doesn't seem to affect the div it's applied to. If there's a Javascript solution, it will also be appreciated. Thank you.
JSFiddle
*{
box-sizing:border-box;
}
.theCircle{
width:84vw;
height:84vw;
border:0.5vw solid black;
margin:auto;
border-radius:42vw;
position:relative;
}
.innerCircle{
width:62vw;
height:62vw;
border:0.5vw solid black;
margin:auto;
border-radius:31vw;
position:absolute;
top:10.5vw;
left:10.5vw;
}
.bubble {
position: absolute;
width: 30vw;
height: 10vw;
left: 25vw;
border: 1px solid gray;
border-radius: 20vw;
background-color: #e0e0eb;
}
#bName{
position: relative;
top:2vw ;
left: auto;
font-size: 6vw;
border: 1px solid black;
text-align: center;
word-wrap:break-word
}
#child {position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;}
<div class="theCircle">
<div class="bubble"> text inside the bubble</div>
<div class="innerCircle">
<div id="bName"><div id="child">I need this to start in the middle of the circle, and to go upwards when there is a lot of text like this </div></div>
You can solve this by using CSS3 flexbox properties, there's a lot of documentation about flexbox online, It's quite awesome!
Check this edited JSFiddle https://jsfiddle.net/2orwnfxv/3/
You just have to make your inner circle a flexbox container by adding display:flex; then you proceed by centering everything
.innerCircle{
display: flex;
align-items: center;
justify-content: center;
width:62vw;
height:62vw;
border:0.5vw solid black;
margin:auto;
border-radius:31vw;
position:absolute;
top:10.5vw;
left:10.5vw;
}
It's that easy. Hope that helps!
Instead of fiddling around with positions.I guess display:flex here would be a good approach here
check this snippet
* {
box-sizing: border-box;
}
.theCircle {
width: 84vw;
height: 84vw;
border: 0.5vw solid black;
border-radius: 42vw;
display: flex;
justify-content: center;
}
.innerCircle {
width: 62vw;
height: 62vw;
border: 0.5vw solid black;
display: flex;
margin: auto;
justify-content: center;
align-items: center;
border-radius: 31vw;
}
.bubble {
position: absolute;
width: 30vw;
height: 10vw;
left: 25vw;
border: 1px solid gray;
border-radius: 20vw;
background-color: #e0e0eb;
}
#bName {
word-wrap: break-word
}
#child {
width: 50%;
height: 30%;
margin: auto;
}
<div class="theCircle">
<div class="bubble">text inside the bubble</div>
<div class="innerCircle">
<div id="bName">
<div id="child">I need this to start in the middle of the circle, and to go upwards when there is a lot of text like this</div>
</div>
</div>
</div>
Check this codepen reference this
Hope this helps
Take a look at this fiddle
. I want that upvote/downvote button to appear below that image at the left side. At all type of screens (desktop, mobile, tablet). I can place it at the left side, but it change it's position, when the screensize changes. How to fix this problem?
Note: My website will have more than 1000+ images like that and upvote/downvote buttons, so i need a specific property. I do not want to adjust the size (left, right, top) for each image.
html
<h3 style="position:relative;top: 40px;"><center> Welcome to ABC Site, Some text here here </center></h3>
<img id="firstpic" src="https://scontent-hkg.xx.fbcdn.net/v/t1.0-9/13043675_1003992606304327_2817591953882675465_n.jpg?oh=6c840d055b632ee503f498dce6662930&oe=57C7D978" alt="This image is not available, drunk.">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
<input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">1453</span>
<input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />
</div>
CSS
#buttons {
margin-top: 1%;
margin-left: 50%;
margin-right: 50%;
width: 100%;
height: auto;
}
#count {
display: inline-block;
border-radius: 0px;
background-color: #33cc33;
border: none;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 7px;
width: 50px;
margin-top: 0px;
}
.buttonup,
.buttondw {
width: 50px;
height: 50px;
cursor: pointer;
background: transparent;
border: 0;
vertical-align: middle;
}
.buttonup {
background-image: url("http://i.imgur.com/jWPUjR9.png");
}
.buttondw {
background-image: url("http://i.imgur.com/Vu6tuf9.png");
}
.buttonup:hover {
background-image: url("http://i.imgur.com/SFjZ9FD.png");
}
.buttondw:hover {
background-image: url("http://i.imgur.com/aVAeO0F.png");
}
/* image mobile responsive */
img {
max-width: 470px;
width: 100%;
height: auto;
display: block;
margin: 50px auto;
}
You will need to wrap the buttons and image inside the same container, with the buttons wrapped inside a separate div. then make sure the button container is display block and text align left. That should help.
my problem is quite simple. I need the diagonal line in the background image to align with the "X" in the logo and make it stay there no matter how wide the viewport is. I tried to achieve it with css only but with no result. It´s gonna need some javascript I suppose but I have no idea where to start.
<body>
<header>
<div class="container">
<svg class="logo"></svg>
</div>
</header>
</body>
* {
box-sizing: border-box
}
body {
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
header {
opacity: 1;
height: 135px;
line-height:135px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
transition: all 0.3s;
z-index: 1000;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
line-height: 135px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
padding: 0 80px;
}
.logo {
max-width: 200px;
float: left;
}
http://codepen.io/easynowbaby/pen/qdLbgP
Thanks!
looks like what you want is to play around with the background position, try something like this,
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;