I was wondering if there's a way I could simulate the col-md, col-xs for the height attribute of one of my CSS class. I understand I have to use LESS in my CSS, but I can't manage to get it to work.
In this example, I want a height of 10px if the screen is a mobile phone (768px). Do I have to compile the LESS somehow ?
.master-body {
border: 1px solid #bdc3c7;
background-image: url(../../ressources/noise_lines.png);
background-repeat: repeat;
height: 75vh;
overflow: auto;
}
#media (min-width: 768px) {
.master-body {
height: 10px;
}
}
Change min-width to max-width to target all small devices.
Related
Important - this code only works on browsers with container queries enabled
How can I use multiple conditions at the same time for container queries? Using the syntax for #media queries doesn't seem to work.
In this example, the background changes to yellow based on the width and height of the element (resize it to see). But combining the conditions to make the background blue doesn't work.
.tile {
width: 100px;
height: 100px;
border: 1px solid black;
resize: both;
overflow: auto;
container-type: size;
container-name: tile;
}
.tile__inner {
width: 100%;
height: 100%;
}
#container tile (min-width: 100px) {
#container tile (min-height: 100px) {
.tile__inner {
background: yellow;
}
}
}
#container tile (min-width: 100px) and (min-height: 100px) {
.tile__inner {
background: blue !important;
}
}
<div class="tile">
<div class="tile__inner"></div>
</div>
The combined syntax is correct in your example, and works as expected in Chrome v105 as well as Safari Technology Preview v152. I'm seeing the blue background applied when both width and height are 100px or larger.
I would guess that you are using Safari TP v151 or earlier? There was a bug in Safari TP before v152 that required parenthesis around any combination/negation syntax. I expect this will work for you either by using parenthesis (which is also valid syntax):
#container tile ((min-width: 100px) and (min-height: 100px)) {
.tile__inner {
background: blue !important;
}
}
Or by upgrading Safari to the latest TP.
codepen: https://codepen.io/miriamsuzanne/pen/dyeYoBr/30d17f519afe57c5d88f2c281dcbb5e2
I'm having trouble getting the background to display correctly on my landing page. On my desktop, it shows up fine, but on mobile, it appears to be centered in the middle vertically at the top of the page. I'm new to front-end and have been trying all sorts of hacks over the past 4 hours. Could somebody point me in the right direction?
I've set the image to scale to cover the entire screen. There shouldn't be any blank areas. I've tried using responsive modes on my desktop, and the Wright Glider mostly stayed in view as I resized, so the image should also center in the middle of the ... viewport?/window.
For the background, I have a normal sized image, and a cropped image I use for smaller devices
My site is at http://we-fly.ddns.net
Tested only with Chrome 49 on all devices, Android is v5.1
Responsive mode on the desktop doesn't seem to produce the same results.
Source: https://gist.github.com/yanalex981/992a60dd54be82162a45
Screenshots:
Desktop
Nexus 4
Galaxy Tab A 8
Also, if anybody has any suggestions, please share them with me
To fix the issue of your image getting cut off part way, you need to set your background position in your media query's to initial... So in each of your css Media query's paste the following code:
background-position: initial;
This will reset your background position to default when on mobile... from here you should be able to apply different styles to stretch/expand the image to your liking. :)
This is my second answer, I created this instead of adding it to my initial answer because the method is different.
In your HTML (index) file, add the image like this:
<img id="imgBackground" src="http://we-fly.ddns.net/images/back.jpg" />
(I suggest adding it directly after the body tag)
In your CSS, I am just going to post the entire thing, Its a little funny because your last #Media (Min-Width: 601px) is overriding your default for your desktop page... you may want to consider deleting this Media Query... See comments in code below to see changes:
/* Set initial values for your image background */
#imgBackground{
position:absolute; /* Absolute Positioning so we can use "top" and "Left" */
top:0px; /* Set top edge to 0px (Top of the screen) */
left:0px; /* Set left edge of image to 0px, so it starts at the left edge of the screen. */
width:100%; /* We want our widt to be 100% of our browser window */
height:auto; /* we don't care about the image height, so let it set itself based on the image's proportions */
position:fixed; /* Make our image scroll with the user so if they can scroll they don't leave our background behind, exposing the white "body" tag background. */
}
body {
text-align: center;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
}
#quote-conatiner {
position: fixed;
margin: auto auto 24px auto;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
background-color:rgba(180, 180, 180, .4);
}
h3 {
font-family: Garamond sans-serif;
color: white;
width: 80%;
margin: .5em auto .5em auto;
}
.button {
font-family: sans-serif;
text-decoration: none;
padding: .3em 0.6em;
border-radius: 8px;
border: 2px solid #59169c;
background-color: #417;
color: white;
box-shadow: 0 0 64px black;
}
.button-container {
position: fixed;
margin-left: auto;
margin-right: auto;
top: 80%;
left: 0;
right: 0;
}
.button:active {
background-color: #330855;
}
#media only screen and (max-width: 600px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 1.2em;
}
.button {
font-size: 1.4em;
}
}
#media only screen and (max-width: 400px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 0.8em;
}
.button {
font-size: 1.0em;
}
}
/* May want to consider getting rid of this Query, if you don't it is overriding your styles set above your media querys. */
#media only screen and (min-width: 601px) {
/* Set image background qualities for any display larger than 601px.*/
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
max-width: 600px;
font-size: 1.3em;
}
.button {
font-size: 1.3em;
}
}
"background-size: cover" does not cover mobile screen
and
height: 100% or min-height: 100% for html and body elements?
held the answer. I had to set the height of the root elements for background-size: cover to work:
html {
height: 100%;
}
body {
min-height: 100%;
}
It works on the Nexus 4 and on the Galaxy Tab
Reason for having to do this (stolen from last answer):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
#Alex how exactly you want image to be display...for different screen size you can use the #media css property to resize image as per screen size.
#media screen and (min-width: 480px) {
body {
property: attribute;
}
}
See more about the #media css attributes here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I am trying to create a Reddit page using CSS. My problem is scaling. I want to make an object, .side, smaller in length. On my 1080p monitor, it looks great, but when I zoom in or out it will not scale with the browser. It is also too large on mobile.
Here is the code:
#header {
background: url(%%rtv6a%%);
background-repeat: no-repeat;
background-position: -3px 24px;
height: 130px;
}
#header-bottom-left
{
position: absolute;
bottom: 0;
}
div.side div.spacer:nth-of-type(5)
{
background:url(%%tangoglobe4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
}
div.side div.spacer:nth-of-type(5):hover
{
background:url(%%goglobal4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
transition: .6s;
}
body, .side, .titlebox form.toggle, .leavemoderator, .icon-menu a, .side .spacer
{
background:url(%%whiteticks%%);
}
.sitetable
{
background:url(%%ticks%%);
}
.morelink .nub
{
display: none;
}
.sitetable
{
max-width: 83%;
border-color: #5C5C5C;
border-style:solid;
border-width:1px;
}
Here is what I want it to look like: http://i.imgur.com/CM1Ejgp.jpg
When I scale it: http://i.imgur.com/HGsnSvD.png
You will notice the grey box get farther and father away. What can I do to fix this?
Sorry, I am new to coding.
You might want to look into media queries:
Media queries look at the capability of the device, and can be used to
check many things, such as:
width and height of the browser window
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more
You can use media queries to set sizes and widths of text or containers in CSS depending on the size of the browser. Eg:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
I'm pretty new to css and I am working locally so I cannot provide the exact address, but here goes:
I am using the wpexplorer adapt theme which has a responsive layout. I set up the wrapper background in the style.css like so:
#wrap{
background: url(images/scribble-top.jpg) center top no-repeat #fff;
margin: 0 auto;
width: 1040px;
padding: 0 30px;
}
When I moved into responsive.css to start designing the other viewpoints I wanted to use a new background image for the wrap div in the tablet portrait view but for some reason the new image will now show up at all (just remains blank) and the style.css background appears again when I shrink it to the mobile viewports. Here is my coding:`
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 740px */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {background: #000;}
#wrap {background: url(images/scribble-top-680.jpg) no-repeat center top #fff; width: 680px; overflow:inherit;}
.hp-highlight, .portfolio-item, .home-entry, #footer-one,#footer-two,#footer-three,#footer-four{ width: 155px; }
#home-tagline{ font-size: 21px; }
#search { text-indent: -9999px; }
.loop-entry-thumbnail{width: 35%;}
}
It should be noted that the new image is the exact width of the new wrap div size and that the height is not relative as it is just a banner-type image at the top of the wrapper thus should not interfere with wrap div height.
What am I doing wrong?
Thanks in advance for your help!!!
`
add !important after your background declaration like so:
#wrap {
background: url(images/scribble-top-680.jpg) no-repeat center top #fff !important;
width: 680px;
overflow:inherit;
}