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%; */
}
}
Related
I have zero coding experience and have been working on my portfolio using cargo. I'm currently trying to adjust the mobile view of one of my articles on my home page using media queries, but the code seems to change the layout on desktop as well. I'll drop reference pictures below of the desired mobile and desktop views, as well as the current code I'm working with. Any help is appreciated, thanks!
**(disregard the borders in the code, this was mostly for visibility purposes when making changes)
Here's my code:
<style>
.tiffany {
/*border: solid green 3px;*/
width: 100%;
height: 100%;
}
.tiffany img {
width: 100%;
height: 100%;
position: relative;
}
.tiffany .textbox {
/*border: solid red 3px;*/
position: absolute;
margin: 32px;
font-weight: bold;
text-align: left;
}
.resize_tiffany {
font-size: 5vw;
}
.tiffany .gradient {
/*border: solid red 3px;*/
left: 0px;
top: 0px;
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
/* other styles (left, top, right, and padding) */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
}
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 50px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 16px;
font-size: 16px;
border: none;
font color: rgb(255, 255, 255)
}
#media only screen and (max-width: 480) {
.tiffany .textbox {
border: solid blue 3px;
position: absolute;
margin: 15px;
font-weight: bold;
text-align: left;
}
#media only screen and (max-width: 480) {
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 10px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 8px;
font-size: 16px;
border: none;
font color: rgb(255, 255, 255)
}
}
</style>
<div class="tiffany">
<img class="background-image" src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg">
<div class="gradient">
<div class="textbox full-pointer-events-none">
<h1> <span class="resize_tiffany">Tiffany Alfonseca Pays Homage in Painting</span></h1>
<br>
</div>
<div class="read-here">
<bodycopy> <b>Read here</b> </bodycopy>
</div>
</div>
<br></div>
You haven't added in the px like so:
#media only screen and (max-width: 480px)
{
}
Also I would highly recommend using rem instead of vw for the font-size. You can read more about that on: https://www.freecodecamp.org/news/what-is-rem-in-css/
Essentially, If you don't specify font-size the default is 16px, 1rem would therefore be equal to 16px, 2rem = 32px and so on.
I am designing my web app to be mobile-first in design by using only the min-width media-query. However it is not working as how it should work! Instead of content being smaller at and below a screen-size of 500px, it is larger instead. And instead of content being larger at above a minimum screen-size of 500px, it is smaller. I want all content to be smaller at and below a minimum screen-size of 500px, and larger at screen sizes larger than 500px. I also want to have the "Generate Quote" and "Tweet" button shifted up or down to accommodate the changes induced by the min-width media-query
You can view my CodePen here: https://codepen.io/IDCoder/full/KZqNdr/
Here is my CSS code:
.container{
text-align: center;
background-image: url("https://s25.postimg.org/9pnce8yr3/galaxy-s8_overview_kv_type1b.jpg");
/**https://s25.postimg.org/exhm9rejz/galaxy-s8_overview_kv_type1.jpg"**/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
margin: auto;
/**border: 3px solid grey;**/
}
h1{
color: white;
}
.Motorcycle{
margin: auto;
width: auto;
/**border: 1px solid grey;**/
text-align: center;
}
/**
.cropper{
border-radius: 80px;
opacity: 0.85;
}
**/
.btn.btn-default{
color: #0040ff;
font-size: .80em;
font-family: Orbitron, sans-serif;
line-height: 4em;
}
.gstuff{
background-image: url("https://s25.postimg.org/onteix7u7/G_Motorcycle_Helmet_3.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 350px;
height: 477px;
margin: auto;
opacity: 0.85;
}
#push-one{
transform: translateY(200px);
background-color: #c6c6c4;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
border-radius:15px;
height: 50px;
width: 150px;
margin: auto;
}
#push-two{
transform: translateY(530px);
background-color: #c6c6c4;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
border-radius:7px;
height: 30px;
width: 50px;
margin: auto;
line-height: 2em;
color: blue;
}
#media(min-width: 500px){
.gstuff{
width: 250px;
height: 341px;
}
}
I achieved an adequate mobile-first min-widthwith this CodePen: , but I'm having a hard time achieving it with this one
For starters you have an error in your media query you need to specify screen and. Also, I assume that this is for the smaller screen size since gstuff has a wider initial setting.
#media screen and (max-width: 500px) {
.gstuff{
width: 250px;
height: 341px;
}
}
Next you need position:relative in your gstuff class. Finally, I absolutely position the tweet button bottom and in the center with:
#push-two{
background-color: #c6c6c4;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
border-radius:7px;
height: 30px;
width: 50px;
margin: auto;
line-height: 2em;
color: blue;
position:absolute;
bottom:0;
left:50%;
right: 50%
}
Absolute positioning only works when you use position:relative or absolute on the parent container.
Here is a codepen
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.
I found that the following CSS instruction does not resize the DIV background image showing in IE9. Do you have any idea?
HTML:
<DIV id=window20 class="window smallWindow">
<STRONG>abcde</STRONG>
<BR /><BR />
</DIV>
CSS:
.window {
Z-INDEX: 20;
BORDER-BOTTOM: #346789 2px dotted;
POSITION: absolute;
BORDER-LEFT: #346789 2px dotted;
PADDING-BOTTOM: 0.5em;
PADDING-LEFT: 0.5em;
WIDTH: 14em;
PADDING-RIGHT: 0.5em;
FONT-FAMILY: helvetica;
HEIGHT: 4em;
COLOR: white;
FONT-SIZE: 1.0em;
BORDER-TOP: #346789 2px dotted;
BORDER-RIGHT: #346789 2px dotted;
PADDING-TOP: 0.5em;
border-radius: 0.6em;
-moz-border-radius: 0.6em
}
.smallWindow1 {
BACKGROUND-COLOR: #558822
}
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: auto;
background-origin: content-box;
}
Try This
CSS
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
}
IE9 does support background-size, but the problem in your example is that you have background-size: auto, which means not to stretch the background! (Which is the default if you don't specify the property.)
Solution: use 100% 100% or cover or contain, depending on your needs.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I would have made a fiddle, but I don't have your background picture, and besides, the div in your example doesn't move, so it would not have been very illustrative.
Question: I'm trying to get all the elements to align and fit into one div without overflowing. Why are some div's sticking out if the parent div is set to overflow:hidden? How can I fix this?
Example: http://jsfiddle.net/YNS8b/
Thanks!
Code:
<div id = "top_bar" >
<div id="top_left_button" >border</div>
<div class="trapezoid-border"></div>
<div class="trapezoid"> border </div>
</div>
#top_bar{
background-color: #000;
border-bottom: 1px solid #666;
color: #222;
position:fixed;
left:0px;
top: 0px;
width:100%;
overflow:hidden;
height: 50%;
font-weight: normal;
white-space: nowrap;
color: white;
z-index:20;
line-height: 45px;
min-width:320px;
max-width: 320px;
max-height:48px;
border-radius: 5px;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
}
#top_bar:after {
content: '';
width: 10%;
display: inline-block;
font-size: 0;
line-height: 0
}
.trapezoid{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid #446DB2;
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 50px;
display: inline-block;
right:1px;
z-index: 100;
}
.trapezoid-border{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid rgba(225, 225, 225, 0.5); /* Color Changed will be pseudo-border color */
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 53px; /* Extra 3 pix when compared to .trapezoid class width */
display: inline-block;
right:1px;
}
#top_left_button {
color: white;
height: 100%;
overflow:hidden;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top_left_button{
width: 20%;
border-right: 2px solid #666;
background-color: #446DB2
}
At one time browsers supported rounded corners, but didn't always mask all of the contents that might appear within the curve of the border itself. Many solutions were suggested, including rounding any children that appear in proximity to the parents already-rounded corner, using proprietary features like a webkit mask, etc. Today, modern browsers will mask the contents far better, so this should no longer be an issue. In fact, opening this demo up in modern versions of Chrome and Internet Explorer reveal that the browser has itself corrected the behavior.
Additional discussion can be found here: How to make CSS3 rounded corners hide overflow.