I want my .container element to be at a width of 100% when it reaches a screen size of 900px. The problem is that I use .container on every page and only want to affect the appearance of .container in the #sub-top div.
the hardest thing is terminology for me but i think this is the closest to what i have the ability to describe.
As you can see below, i am trying to get the .container class to go to 100% rather than 85% when it reaches a screen size of 900px or smaller.
#media
.container{
width: 85%;
height: auto;
}
#sub-top{
background-color: gray;
height: auto;
}
#media (min-width: 900px) {
#sub-top .container {
width: 100% !important;
height: auto;
}
}
<div id="sub-top">
<div class="container">
<div class ="content">
<p> HERE IS CONTENT </p>
</div>
</div>
</div>
Try this instead:
#media screen and (max-width: 900px) {
#sub-top .container {
width: 100%;
height: auto;
}
}
This works:
.container {
width: 85%;
height: auto;
background-color: gray;
}
#sub-top {
height: auto;
}
#media (max-width: 900px) {
#sub-top .container {
width: 100% !important;
height: auto;
}
Related
I'm Transferring some design to a web page, but I can't seem to get the background image to show. I've checked various solutions online and they keep telling me to add the 'background-image' property, which I have done. Yet it doesn't work. I've pasted the code below. I apologise if it's a very obvious mistake as I'm not quite familiar with CSS.
Could someone please point out where my mistake is?
import React from "react";
import styled from "styled-components";
// Assets
import HeaderImage from "../../assets/img/covlie_homepage_illustration.png";
export default function Header() {
return (
<Wrapper id="home" className="container flexSpaceCenter">
<LeftSide className="flexCenter">
<div>
<h1 className="extraBold font60">Some Text</h1>
<HeaderP className="font13 semiBold">
Some Text
</HeaderP>
</div>
</LeftSide>
<RightSide>
<ImageWrapper>
<Img className="radius8" src={HeaderImage} alt="office" style={{zIndex: 9}} />
</ImageWrapper>
<GreyDiv className="lightBg"></GreyDiv>
</RightSide>
</Wrapper>
);
}
const Wrapper = styled.section`
padding-top: 80px;
width: 100%;
min-height: 840px;
background-image: transparent url('../../assets/img/page_heade_rbackground_image.png') 0% 0% no-repeat padding-box;
#media (max-width: 960px) {
flex-direction: column;
}
`;
const LeftSide = styled.div`
width: 50%;
height: 100%;
#media (max-width: 960px) {
width: 100%;
order: 2;
margin: 50px 0;
text-align: center;
}
#media (max-width: 560px) {
margin: 80px 0 50px 0;
}
`;
const RightSide = styled.div`
width: 50%;
height: 100%;
#media (max-width: 960px) {
width: 100%;
order: 1;
margin-top: 30px;
}
`;
const HeaderP = styled.div`
max-width: 470px;
padding: 15px 0 50px 0;
line-height: 1.5rem;
#media (max-width: 960px) {
padding: 15px 0 50px 0;
text-align: center;
max-width: 100%;
}
`;
const GreyDiv = styled.div`
width: 30%;
height: 700px;
position: absolute;
top: 0;
right: 0;
z-index: 0;
#media (max-width: 960px) {
display: none;
}
`;
const ImageWrapper = styled.div`
display: flex;
justify-content: flex-end;
position: relative;
z-index: 9;
#media (max-width: 960px) {
width: 100%;
justify-content: center;
}
`;
const Img = styled.img`
#media (max-width: 560px) {
width: 80%;
height: auto;
}
`;
I finally discovered the issue. I'm using styled components, and the implementation for styled components is different. First I should have imported the image
import bgImg from "../../assets/img/page_heade_rbackground_image.png"
Then implemented like this
const Wrapper = styled.section`
padding-top: 80px;
width: 100%;
min-height: 840px;
background-image: url(${bgImg});
#media (max-width: 960px) {
flex-direction: column;
}
`;
Don't know if this will help but the background image is set to transparent.
background-image: transparent url('../
I see that when you figured it out you didn't use transparent :)
I have a div element and I want my image within it to scale to the full width of the parent however for some reason its not taking up the full width. I could use object-fit: cover; but I don't want to crop the image I want it to fill up the space of the parent. Id also like to scale it so it remains a square the whole time so it always scales as an equal square. I am a little confused as to why its not taking up the parents container. It seems to be wanting to keep its aspect ratio but I want it to stretch to the parent container both via its height and width properties.
html:
import React from 'react';
const ThreeGridTeaser = (props) => {
return (
<div className="specific-offer-container mt-0">
<div className="three-grid-teaser-wrapper">
<div className="three-grid-teaser-container">
{props.gridData.map((item, index) => (
<div key={index} className="three-grid-teaser-block">
<div className="three-grid-image-container hidden">
<img src={item.image}
/>
</div>
<div className="product-text-container hidden">
<ul>
<li className="product-title">{item.title}</li>
<li className="product-description">{item.description}</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
)
}
export default ThreeGridTeaser;
SASS:
.three-grid-teaser-wrapper {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.three-grid-teaser-container {
width: 100%;
justify-content: center;
flex-wrap: wrap;
height: auto;
display: flex;
grid-gap: 20px;
gap: 20px;
#media (max-width: 1199.98px) {
gap: 25px;
}
#media (max-width: 767.98px) {
width: 100%;
}
}
.three-grid-teaser-block {
display: flex;
width: 32%;
height: fit-content;
#media (max-width: 1199.98px) {
width: 48%;
}
#media (max-width: 767.98px) {
width:47%;
}
justify-content: center;
flex-direction: column;
}
.hover-text-underline {
text-decoration: underline;
text-underline-position: under;
}
.three-grid-image-container {
height: 300px;
#media (max-width: 1199.98px) {
height: 350px;
}
#media (max-width: 767.98px) {
height: 180px;
}
width: 100%;
max-width: 100%;
img {
display: block;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
}
.product-text-container {
ul {
margin-top: 10px;
padding: 0;
li:last-child {
padding-top: 5px;
}
li {
list-style: none;
}
}
}
.product-title {
font-family: $terminaDemi;
font-size: 12px;
#media (max-width: 767.98px) {
font-size: 8px;
}
}
.product-description {
font-family: $Montserrat;
font-size: 18px;
#media (max-width: 767.98px) {
font-size: 12px;
}
}
This is because the image has reached its maximum height in relation to the div. I mean, an image 300px wide and 400px high inside a 400px square div, in this case if you put a width of 100% in the image, the maximum that it will reach in its width is 300px, in the case of you don't want to resize it.
Demonstração
Update
'object-fit: contain' makes the image fit in the space it has proportionally available, if you want it to maintain its proportion and fill the entire space, use the 'object-fit: cover'
look at this
https://jsfiddle.net/gxnvuq6s/8/
have you tried looking at the background-size: cover; style? you can then also position your image with background-position: center center;
I am using styled components to style my react project, components are working fine, but for some reason media queries are not applied. Here's a snippet that works when using regular css:
import styled from 'styled-components';
export const Block = styled.div `
margin: 20px;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-self: center;
background-color: #DAD870;
flex: 1;
min-width: 200px;
height: auto;
transition-duration: 1s;
font-family: sans-serif;
&:hover {
transform: scale(1.1);
}
#media (max-width: 1024px) {
width: 42%;
min-width: 158px;
}
#media (max-width: 480px) {
width: 40%;
min-width: 148px;
}
`;
I don't really use react but it looks like you are trying to use #media inside of an element, I don't think that works, instead try something like:
div{
min-width: 200px;
}
#media (max-width: 1024px) {
div{
width: 42%;
min-width: 158px;
}
}
#media (max-width: 480px) {
div{
width: 40%;
min-width: 148px;
}
}
I don't know how to show you like the way you did it but basically you need to declare it separately, hope it helped.
I am trying to understand how to make a web page which will go in full height and width in asp.net. I know to use width: 100% for the background but I am not understanding how to change the width and height of other buttons, , and other stuff..
I search on google and youtube for that but I am not getting a good tutorial to explain how I should make it.
Should I use jquery or javascript? I'm trying to stay far from those at the moment.
Can any one please give me a simple explanation about this?
Best way to control ui styles, should be CSS.
For example, setting a element to full width and height
.full_width {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}
.element_inside {
width: 100px;
border: 1px solid red;
}
.button_inside {
width: 125px;
height: 60px;
line-height: 60px;
}
<div class="full_width">
I am full width element
<div class="element_inside">
Low width
</div>
<button class="button_inside">
Button
</button>
<button style="width: 100%;">
Button full width
</button>
</div>
But it uses absolute position.
You could use something like this too.
html {
display: table;
width: 100%;
min-height: 100%;
}
body {
display: table-row;
}
.full_width {
width: 250px;
display: table-cell;
vertical-align: top;
min-height: 100%;
}
.full_width {
border: 1px solid #f00;
}
<div class="full_width">
full width container
</div>
For responsive layout, and different screen different size, you can use following codes:
#media (min-width: 768px) {
.container {
width: 740px;
}
}
#media (min-width: 992px) {
.container {
width: 960px;
}
}
#media (min-width: 1200px) {
.container {
width: 1160px;
}
}
#media (min-width: SCREEN_WIDTH_IN_PIXELS) {
.container { // my element width for this screen
width: 1160px;
}
}
Use different css container class for buttons. For ex;
.body{
width: 100%
}
button {
color: #666;
border-color: #EBEBEB;
background-color: #EBEBEB;
text-align: center;
height:200px;
width:200px;
}
And then use for button,
<button class="button">Button</button>
Ive got a grid that has boxes in it, each box is the same size and has the same markup.
What im trying todo is have the boxes fill the full width of the page with an even gap between them. The idea is that if the browser window moves the box items will restack.
Ive looked into various ways of doing this including using the grid system from bootstrap 3, as well as from HERE
Ive also looked into using a JS plugin for this like Masonry, which although would work seems a bit overkill as all the tile sizes are the same.
At the moment ive got it almost working here : http://jsfiddle.net/3xshcn7p/
The only issue with this current approach is that if the browser window is <719px but >481 it will display only 2 of the boxs and leave a big blank space down the right hand side.
The same issue occurs between all of the boxes when the screen is not big enough for the next number of boxes per row up.
Any ideas if this is achievable purely using css or would it have to use js ?
You can use flexbox approach for the solution.
justify-content: space-around is used if the even space is needed around all the elements of the layout.
justify-content: space-between is needed for even space in between the elements of the layout.
body {
box-sizing: border-box;
height: 100%;
background: #336633;
}
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.box {
width: 200px;
height: 250px;
background: white;
float: left;
margin: 20px;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!--wrapper-->
Try adding text-align: center; to the body element then change float: left; to display: inline-block;.
E.g.
body {
box-sizing: border-box;
height:100%;
background: #336633;
text-align: center;
}
.box {
width: 200px;
height: 250px;
background: white;
display: inline-block;
margin: 20px;
}
Here's the JsFiddle link.
Update: I also answered a similar question. Centre Multiple Responsive Divs Using CSS / JQUERY / HTML
Hope it helps.
Flexbox can do this,
Jsfiddle Demo
body {
box-sizing: border-box;
height:100%;
background: #336633;
}
.wrapper {
display:flex;
flex-direction:row;
justify-content:space-around;
flex-wrap: wrap;
}
.box {
width: 200px;
height: 250px;
background: white;
margin: 20px;
}
If you want to fill the whole width, then 1. you keep the .box width fixed at 200px, and then you can just center, or 2. you give them a flexible width.
Here one more solution, with flexible width and flexible margins, using media queries.
body {
box-sizing: border-box;
height:100%;
background: #336633;
}
.box {
height: 250px;
background: white;
float: left;
/*margin: 20px;*/
margin: 2%;
width: 100%;
}
/* 50% - ( 2 * 2% margins ), etc */
#media (min-width: 240px) { .box { width: 46%; } }
#media (min-width: 480px) { .box { width: 29%; } }
#media (min-width: 720px) { .box { width: 21%; } }
#media (min-width: 960px) {
/* Now we set margin to 1%, so .box width is 20% - (2 * 1% margins) */
.box { width: 18%; }
.box { margin: 1%; }
}
#media (min-width: 1200px) { .box { width: 14.666%; } }
#media (min-width: 1440px) { .box { width: 12.285%; } }
#media (min-width: 1680px) { .box { width: 10.5%; } }
#media (min-width: 1920px) {
.box { width: 10.111%; }
.box { margin: 0.5%; }
}
#media (min-width: 2160px) { .box { width: 9%; } }
/* and just go further if you want more columns */
/* media queries if you want fixed margin of 20px on each side
#media (min-width: 240px) { .box { width: calc(50% - 40px); } }
#media (min-width: 480px) { .box { width: calc(33% - 40px); } }
#media (min-width: 720px) { .box { width: calc(25% - 40px); } }
and so on
*/
You can use relative values for the width and margin of those boxes. For example width: 30%/width: 30vw;.
.box {
width: 30vw;
margin: 1vw;
height: 250px;
background: white;
float: left;
}
http://jsfiddle.net/3xshcn7p/3/
I would use css column. Like so :
article {
columns: 2 200px;
column-gap: 4em;
column-rule: 1px dotted #ddd;
}
If the window gets smaller, the number of columns is reduced. Here's the CodePen of css-tricks.com
http://codepen.io/katydecorah/pen/0cef950304c03248935b3b821e8b7cec