I would like position:fixed to only work when I'm displaying the app on a large screen. If I am in mobile, I don't want position:fixed. What is wrong with my scss? I actually just took the idea from another stackoverflow post.
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
position: fixed;
#media #{$small} {
position: relative;
}
}
}
I figured it out and it's working great!
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
#media only screen and (min-width: 400px) {
position: fixed;
}
}
}
according to zurb foundation
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
position: relative;
#media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
position: fixed;
}
}
}
Related
This question already has answers here:
How do I center an image if it's wider than its container?
(10 answers)
Flexbox: center horizontally and vertically
(14 answers)
Center image that is bigger than the screen
(9 answers)
Closed 2 years ago.
I use an image as a backround, something like this:
<div class="container">
<img src="http://somestorage.com/img.png" />
</div>
css:
.container {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
min-width: 100%;
min-height: 100%;
}
The problem is thought, that I wanna have a central top part on narrow screens. Now it shrinks like this:
I wanna it be like here:
JsFiddle
Could anyone suggest a solution?
Simply I changed min-width: 100%; with width: 100%; and added object-fit: cover;
.container {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
width: 100%;
min-height: 100%;
object-fit: cover;
}
<div class="container">
<img src="http://img.ohandroid.com/android/TJ0mc.png" />
</div>
I would try something like this:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
min-width: 720px;
min-height: 480px;
}
You could also change out the images for differing sizes of screens using media queries.
#media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
#media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
#media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
ref: https://web.dev/optimize-css-background-images-with-media-queries/
I have a fab-menu that I want it to be on top of data table buttons see screenshot (relative position):
CSS:
.fab-menu {
position: relative;
display: inline-block;
white-space: nowrap;
padding: 0;
margin: 0;
list-style: none;
z-index: 999;
}
I have tried position absolute which worked but the fab-menu buttons are misplaced. See screenshot (absolute position):
CSS of data table scroll wrap:
.datatable-scroll-wrap {
width: 100%;
min-height: .01%;
overflow-x: auto;
}
PS : if i remove overflow-x: auto; the buttons will appear on top but the table scroll bar will not show up if i resize the page
under
.datatable-scroll-wrap {
width: 100%;
min-height: .01%;
overflow-x: auto;
}
add the following :
#media (max-width: 767px) {
.datatable-scroll-wrap .dropdown-menu {
position: absolute!important;
}
}
#media (min-width: 768px) {
.datatable-scroll-wrap {
overflow: visible;
}
}
I cannot handle correctly my #main-wrapper behaviour for #media only screen and (min-width: 1400px)
What I am trying to get is that #main-wrapper has 100% width for resolution <1400px and >1400 its width is set to 1336px
Now #menu-section overflows #content-section
Live example:
http://solutionsmvo.nazwa.pl/nell-ogrody/o-nas/
Code:
#main-wrapper {
width: 100%;
overflow:hidden;
}
#menu-section {
width: 25%;
float: left;
height:100vh;
position: fixed;
}
#content-section {
width: 75%;
float:right;
min-height: 100vh;
}
#media only screen and (min-width: 1400px) {
#main-wrapper {width: 1336px; margin: 0 auto;}
}
<div id="main-wrapper">
<div id="menu-section">
</div>
<div id="content-section">
</div>
</div>
because your #menu-section in <1400px has position: fixed; property, it's okay in this case, but when width > 1400px, then this problem occur. remove position: fixed; and test it.
The problem is position:fixed on your sidebar element.
You need to add position relative to main-wrapper and change position from fixed to absolute in your menu-section
#main-wrapper {
position: relative
}
#menu-section {
position: absolute; //instead of fixed
}
I am using bootstrap to implement the responsive web design. I am facing issue to apply "left" property as %. What I found is, instead of taking the % of total browser width, it takes the % of #media width define which really breaking the responsive nature of application.
.image-container {
width: 173px;
top: -69px;
left: 50%;
margin-left: -86px;
max-width: 336px;
overflow: hidden;
position: absolute;
}
#media (min-width: 660px) {
.image-container {
left: 63%;
}
}
#media (min-width: 831px) {
.image-container {
top: -91px;
left: 80%;
width: 30%;
}
}
#media (min-width: 1280px) {
.image-container {
left: 85%;
}
}
I found following
1. At >1280 width, left=1280*.85 is used
2. At > 831, left=831*.80 us used
3. At > 660, left=660*.63 is used
Following is HTML markup snippet
<div class="bottom-section">
<div class="parent-container">
<div class="image-container">
<img class="card-art" src="/img/application/cardarts/thumbnails/img.png">
</div>
</div>
</div>
Following is parent container css
.parent-container {
padding-left: 0;
width: 100%;
padding-top: 68px;
max-width: 970px;
margin: 0;
position: relative;
}
#media (min-width: 660px) {
.parent-container {
padding-top: 20px;
}
}
This is a surprising behavior for me. My understanding is, left=x% should alwasy look for parent element and apply the % of that. I am new to media query and using bootstrap to implement the responsive web design.
Here is a fiddle to play with.
My media query for portrait orientation doesn't seem to work. Any ideas what I'm doing wrong, please?
html:
<div class="titleCard" id="first" style="background-color:white"></div>
css:
html, body { -webkit-backface-visibility:hidden;}
#first {
background-color: #000;
width: 100%; max-width: 1920px;
height: 100%; max-height: 1080px;
background: url('images/bg.png') no-repeat center;
background-size:cover;
position:relative;
}
.bgwidth { width: 100%; max-width: 1920px; }
.bgheight { height: 100%; max-height: 1080px; }
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
It works (simplified test). It's just that you're not telling it for what element it should change the background when the orientation changes.
You probably meant to have something like:
#media all and (orientation: portrait) {
#first {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
}
instead of:
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}