I got an assignment to make a modal below responsive. Should I just place more media queries or fix modal sizes to a percent? Are there any techniques,tips or websites which could help me to accomplish my goal?
Thank you in advance.
Modal Parent:
.OverlayModal {
z-index: 2;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
Modal:
.SignInModal {
background: rgb(255, 255, 255);
border-radius: 20px;
border: 1px solid rgb(204, 204, 204);
margin: auto;
width: 238px;
height: 550px;
outline: none;
overflow: scroll;
padding: 0;
#media (min-width: 768px) {
width: 420px;
height: 400px;
}
}
In simple,
Percentage based layout is used when the layout should be similar on every screen.
Media queries is used when you want to change the layout on different screen sizes.
Related
I'm doing a React & Sass tutorial and the last image on the slider/carousel disappears whenever I hover on an image.
The issue seems to stem from position: absolutein &:hover. If I remove this, the last image appears whenever I hover on an image. I need to include this line so that the hover appears at the correct position.
The .scss for the slider:
.list {
width: 100%;
margin-top: 10px;
.listTitle {
color: white;
font-size: 20px;
font-weight: 500;
margin-left: 50px;
}
.wrapper {
position: relative;
.sliderArrow {
width: 50px;
height: 100%;
background-color: rgb(22, 22, 22, 0.5);
color: white;
position: absolute;
z-index: 99;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
&.left {
left: 0;
}
&.right {
right: 0;
}
}
.container {
margin-left: 50px;
display: flex;
margin-top: 10px;
width: max-content;
transform: translateX(0px);
transition: all 1s ease;
}
}
}
The .scss for the individual items within the slider:
.listItem {
width: 225px;
height: 120px;
background-color: var(--main-color);
margin-right: 5px;
cursor: pointer;
color: white;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover{
width: 325px;
height: 300px;
position: absolute;
top: -150px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
border-radius: 5px;
img {
height: 140px;
}
}
}
Screenshots:
Try to use margin properties to set image to proper position coz position:Absolute will shift the image to move according to the page and top : 150px makes the image move beneath the main image(Cover Image)
I just realized what's going on. When I hover, the item that is being hovered is taken out of the list and the rest of the items are pushed inwards, it wasn't actually missing. It would have been more obvious had I used different images for each item.
Here is the CSS code for my webpage, I want to resize this page according to screen size and resolution.
Different div classes are made to style the div containers.
column1 is fixed div at left and column2 is scrollable div which contain further divs that needs to be resized according to the screen size.
<style>
* {
box-sizing: border-box;
}
.column1 {
float: left;
width: 22%;
padding: 10px;
height: auto;
margin: auto;
text-align: center;
line-height: 20pt;
color: #e6b122;
position: fixed;
}
.photo {
margin: auto;
height: 90px;
width: auto;
overflow: hidden;
}
.column2 {
float: right;
width: 78%;
padding: 10px;
height: auto;
}
.photo img {
margin: auto;
max-height: 100%;
width: 80px;
overflow: hidden;
border-radius: 50%;
}
.image {
height: 400px;
max-width: 100%;
background-color: white;
overflow: hidden;
}
.image img {
margin: auto;
width: 700px;
max-height: 100%;
background-color: white;
overflow: hidden;
}
.Skill {
margin: auto;
text-align: center;
line-height: 20pt;
float: left;
width: 33.33%;
padding: 10px;
height: 330px;
border: 4px solid #F281F0;
border-radius: 35px;
}
h4 {
color: #C39D19;
}
p {
font-size: 12px;
font-family: cursive;
}
a {
text-decoration: none;
color: #000;
font-family: Garamond;
font-size: 14px;
}
a:hover {
color: #cc00cc
}
/* Container around content */
.container {
padding: 5px 5px;
position: relative;
background-color: inherit;
width: 50%;
border: 4px solid #CEF334;
border-radius: 25px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -18px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Arrows*/
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/*For circles*/
.left::after, .right::after {
left: 16px;
}
/* Left containers position */
.right {
left: 0%;
}
</style>
I learned how to layout my webpage by understanding the following CSS Layout tools.
Flexbox
CSS Grid
Media Queries
You use Flexbox and CSS Grid to layout your content, while Media Queries can help your website be responsive to different media(Phone, Tablets, Desktop etc...) sizes.
Goodluck!
Basically, there are two good solutions for your issue:
Use the Media Queries, and set the proper config for your content depends on the viewport of the browser. I can see in the code, that you already use it, so you know how to deal with it.
the second option is to use a flexbox display, which will adjust content size depend on the page width. Here you have probably the best explanation on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have an issue with my Sticky Footer at the bottom.
It works fine on all browser but not on Safari...why?? :(
#main{
background-color: #f0f0f0;
box-shadow: 0px 20px 30px -20px rgba(0, 0, 0, 0.8);
z-index: 1;
position: relative;
margin-bottom: 250px;
}
footer {
height: 250px;
z-index: -100;
position: fixed;
bottom: 0px;
}
Thanks! ;)
I have fixed it!
Just add this code... ;)
html, body{
min-height: 100%;
height: auto !important;
height: 100%;
}
Thanks anyway.
This page I am developing has a different layout on Safari than Chrome/Firefox
Here is how it looks in Safari
Here is how it looks in Firefox
As you can see, the top banner isn't showing on Safari and i think it's because of the parallax CSS I have added for the banner if I'm not completely wrong here.
Here is the CSS:
.slide {
position: relative;
padding: 15vh 1%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
#title {
background-image: url("http://bildeopplaster.no/8Kk");
background-attachment: fixed;
}
.carsonshold { position: relative; width: 100%; display: block; border-bottom: 1px solid #ccc; }
.carsonshold img { padding: 20px; display: block; border: none; }
#thesedays { padding: 10px 20px; margin: 40px 0; background: #fff; border: 1px solid #ccc; }
#results { padding: 10px 20px; background: #fff; border: 1px solid #ccc; font-family: monospace; }
.text-link {
border: none;
background: none;
padding: 0;
margin: 0;
font-size: 0.85em;
cursor: pointer;
}
Can anyone see why the banner isn't showing up on Safari or what am I missing here?
The first issue is you are using vh units for that element. Unfortunately, Safari didn't support vh and vw units until Version 6 (unprefixed in Version 6.1).
The second issue is that you are using the background: 50% 50% / cover; property-value pair. That is also not a supported value in Safari 5.1.7. You need to remove the / cover bit for it to work in Safari 5.1.7. Safari 5.1.7 should support background-size: cover;, but it seems like it doesn't support the shorthand version you're trying to use here.
Using these values will fix it, more or less:
.slide, .slide::before {
background: 50% 50%;
}
.slide {
padding: 15%;
min-height: 100%;
width: 100%;
}
With that being said, this shouldn't be an issue, because people who use Safari as their main browser will probably be on OS X, which means they'll be on a newer version of Safari. It's unlikely anyone will be using Safari on Windows for their main browser. Then again, it's possible, considering there are still Opera 12 users out there...
I have a DIV that I want to be scrollable, but the problem is that I'm using position: fixed; and the DIV doesn't adjust it's position with the rest of the page; thus disappearing on small resolutions. Any suggestions would be wonderful.
Here's the current DIV:
<div style="
display: block;
top: 200px;
left: 1500px;
width: 130px;
position: fixed;
border: 1px solid rgb(136, 136, 136);
padding: 10px;
text-align: center;
font-weight: bold;
color: rgb(255, 255, 255);
background-color:#FFFFFF;
">
Instead of using pixels for top and left properties use percentages.eg:top:20% instead of top:1200px. In smaller resolutions your top left values makes your div go out of the screen. Try this
display: block;
top: xx%;
left: nn%;
width: mm%;
position: fixed;
border: 1px solid rgb(136, 136, 136);
padding: 10px;
text-align: center;
font-weight: bold;
color: rgb(255, 255, 255);
background-color:#FFFFFF;
According to your dives sizes adjust your percentage values.
One side note If you are targeting mobile devices you can use media queries too eg.
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#myDivId{
width: 100px; /* or width:10%; */
}
}