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
}
Related
When I write max-width(1220px) it works when width is 1300px and when I write second breakpoint 1150px now from 1300px works only 1150px and ignored 1220px
HTML CODE
<div class="container">
<div class="inner">
<div class="left">arrow left</div>
<div class="right">arrow right</div>
</div>
</div>
STYLE CODE
.container {
width: 1600px;
margin: auto;
}
.inner {
position: relative;
}
.left,
.right {
position: absolute;
}
.left {
left: -50px
}
.right {
left: 300px
}
#media (max-width: 1220px) {
.right {
left: 250px
}
}
#media (max-width: 1150px) {
.right {
left: 210px
}
}
you can see the image description here
https://i.stack.imgur.com/7viiX.jpg
max-width: 1220px media query applies on devices with the width of 1220px or smaller, same thing happens for max-width: 1150.
This is what should happen in your code with both breakpoints:
When device width greater than 1220px --> .right { left: 300px; }
When device width smaller than 1220px and greater than 1150px --> .right { left: 250px; }
when device width is smaller than 1150px --> .right { left: 210px; }
My site is responsive. When I change my window size, the content size scales to fit the window. On mobile it's fine, and on desktop it also scales up and down-according to window size.
My content won't, however, span the whole width of the screen on desktop. Height is fine but width it doesn't stretch right across. It sort of sits between the menu bar and logo.
I tried
html, body{height: 100%; width: 100%;}
.container{
width:100%; height: 100%; max-width: 100%; max-height:
100%;position: relative;}
#media screen and (min-width: 48em)
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-
header
{
display: none;
}
.content {position: relative;}
#body {height: 100%; width: 100%;}
With
.container
It did move it, but not across the whole width, just to the left, slightly outside of logo parameter.
Any ideas?
div#primary {
margin: 0 auto;
float: unset; height: 100%; width: 100%;
}
.container{width:100%; height: 100%; max-width: 100%; max-width:
100%;position: relative;}
the position: relative; take it out :) hope that works.
also 2 max-width's, you can take 1 out as well
you can add in your css
#media (min-width: 875px) {
div#primary {
margin: 0 auto;
float: unset;
}
#masthead .flex-row
{
max-width: 66%;
margin: 0 auto;
}
}
I appreciate your help with css. I was placing my banner image using background-image with inline-css. I need now to place out using img tag and well to target the parent with css. Unfortunately my image doesn't resize as when it was inside the inline-css.
Here is my css code. Please see on full page and resize page.
The "effect" I like is that on mobile image only center of image is shown, while on increasing page width image is resized by keeping center of image as the base for the position. See second image of example (called banner-two).
So how to recreate exactly as the image in banner-two using background-image but now placing the image as img src.
I also created a codepen with my code ( link to my code in codepen - please also resize ).
.banner-two {
background-size: cover;
background-position: center center;
height: 240px;
width: 100%;
}
#media (min-width: 768px) {
.banner-two {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-two {
height: 680px;
}
}
<div class="banner-one">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<section>
<div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>
Edit: The below solution only works in Firefox; I can't seem to make it work in the other browsers.
I'll leave it up for now, in case it helps people in the right direction, but I'll delete it when a better working solution comes along.
Just position the banner in the right place.
.banner-one {
height: 240px;
display: inline-block;
position: relative;
left: 50vw;
transform: translateX(-50%);
}
.banner-one img {
height: 100%;
}
.banner-two {
background-size: cover;
background-position: center center;
height: 240px;
width: 100%;
}
#media (min-width: 768px) {
.banner-one,
.banner-two {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-one,
.banner-two {
height: 680px;
}
}
<div class="banner-one">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<section>
<div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>
But the question is, why do you want to do this. You need a lot more CSS to make this work! My gut feeling would be to simply hide the img and then go on with what you were doing with banner-two. I can understand there being restraints that you have to work with though, so I hope this helps!
.banner-one {
width: 100%;
height: 640px;
display: flex;
justify-content: center;
}
.banner-one img {
max-width: 100%;
}
Until now, here is the code. Banner-flex isn't working as image is being centered completely. Banner-transform is working fine. link to examples on codepen
I do wonder if there is a way to do it that could be said is better or more efficient.
Thanks again !
<div class="banner-flex">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<div class="banner-transform">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
.banner-flex {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
}
.banner-flex img {
max-width: 100%;
}
.banner-transform {
height: 240px;
display: inline-block;
position: relative;
left: 50vw;
transform: translateX(-50%);
}
.banner-transform img {
height: 100%;
}
#media (min-width: 768px) {
.banner-flex,
.banner-transform {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-flex,
.banner-transform {
height: 680px;
}
}
#media (min-width: 1800px) {
.banner-transform img {
width: 100vw;
}
}
i'm trying to build a responsiv webpage and it works on small screen up to 640px and on bigger screens. there are two elements next to each other.
The problem is between the breakpoint 640 px and up to bigger screens. Until you've stretched out to bigger screen the two elements floats in to each other. Like between maybe 640 px and up to 800 px..
Here's the css where the two elemets is placed next to each other.
#media screen and (min-width: 640px) {
article {
max-width: 75%;
position: absolute;
margin-right: 2em;
}
aside {
float: right;
display: inline;
max-width: 20%;
}
How can i get them to not float in to each other?
Your position: absolute is creating the problem. Not sure why you need it.
Are you looking for something this below
HTML:
<div class="left"></div>
<div class="right"></div>
CSS:
.left, .right {
float: left;
border: 1px solid red;
height: 200px;
box-sizing: border-box;
}
.left {
width: 70%;
}
.right {
width: 30%;
}
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.