I'm new here. Trying to pass this assessment in order to get into this program. I can't figure this part out for whatever reason. Underneath this is the task and code. I'm not sure if the code is correct. So if anyone could help me out I'll gladly appreciate it.
has a ‘form’ element that is 600px when the window is wider than 600px
#media screen and(min-width:599px) {
form {
display: grid;
width:600px;
margin: 0 auto;
position: relative;
grid-template-columns:600px;
}
}
#media screen and (max-width:601px){
form {
display: grid;
position: relative;
grid-template-columns:600px;
width:100%;
}
}
Media query works like this:
form{
//some design untill the screen is 600px
}
#media screen and (min-width:600px) {
form {
//design when screen is 600px or less than 600px
display: grid;
width:600px;
margin: 0 auto;
position: relative;
grid-template-columns:600px;
}
}
To see more code on media quarry, You can check my git:
link:https://github.com/RudeSoul/Leapfrog/blob/master/FinalDesign/Responsive/css/mediaq.css
To learn more on this visit:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/css/css3_mediaqueries.asp
Related
I have tried 100 different ways to get the footer to stick to the bottom of the page. On all my other pages, it operates fine however on one page, the footer floats to the middle. This is the code I am trying to work but clearly something is off.
#media screen and (min-width : 768px) {
.page-id-94 html, body {
display: none;
}
.site, .site-content {
height: 100%;
}
#boldgrid-sticky-wrap {
min-height: 100%;
height: auto !important;
height: 100%;
}
}
I need this to execute in mobile/smaller screen versions only therefore I used the media query.
I am learning CSS as I go so all this is very new for me. All help is appreciated
Not sure what you're trying to do here, but this is how I usually do my footers:
.footer {
position: absolute;
bottom: 0;
width:100%;
height:20%; //you can hard code a px value for this
padding: 5px; //you may wish to change this as well
}
The div in question is:
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 200px;
background-color: white;
}
What I want is:
#media screen and (max-width: 720px){
.fixed { display: none; }
}
However apparently that's not how fixed containers work?
So how can I hide a "sticky" container when the screen gets resized to something too small to display both the container and the main content and thus making the container overlap the content?
Your css code seems to be working fine, perhaps there is a rule that has more importance/weight than the one in your media query, add !importat and see if it works:
#media screen and (max-width: 720px){
.fixed { display: none !important; }
}
here my website I´m working on: http://www.whatsahoy.com/
My problem: I want the input field next to the button. If I add a float left, it goes next to each other but with a weird <br>. And then the whole thing is also on the left. I want it to be in the middle.
Can somebody help me please?! Thank you very much!
Barbara
To provide you with the best solution, it would be helpful to see the source code of your form. The <br> is probably in there somewhere. However, here is my reply based on what I can see. If it does not help, I suggest you update your question.
Adding the following styles to your custom CSS will put the field and button next to eachother until screen width of 767px.
.wpcf7-form p {
display: inline-block;
width: 470px;
max-width: 95%;
}
.wpcf7-form p br {
display: none;
}
If you would like them next to eachother on smaller screens, you could change the width of the frame. This changes on 767px as set by your theme. I'm not sure this will not have an undesired effect elsewhere on your site, but you could try.
#media only screen and ( max-width: 767px ) {
.et_pb_row {
width: 600px;
}
}
However, it then will be crippled on screens as from 600px. It may be better to make the text field smaller then...
#media only screen and ( max-width: 600px ) {
.wpcf7 input {
max-width: 50%;
}
}
You might want to fine tune this a bit, but I hope you get the idea.
GL!
.wpcf7-form-control-wrap {
display: inline-block !important;
margin: -8px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
justify-content: center !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
border-radius:0px !important;
width: 30%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
div#wpcf7-f698-p10-o1 {
width: 130%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
width: 235px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
padding-right: 70px;
}}
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've been having some issues with my CSS3 media queries...
Here's a small snippet of one I'm currently working on:
#media only screen
and (max-width : 420px) {
.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }
/* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
#media only screen
and (max-width : 480px) {
.page .alpha { font-size: 3em; }
}
I'm working from a 'mobile first' standpoint and given the normal behaviour of CSS regarding the 'cascading' aspect I would expect the second #media statement to inherit all of the styles from the previous statement, whilst overriding any for which it has a matching or 'heavier' selector.
(Plus CSS's order of precedence would mean any matching style definitions would use the last defined rule-set unless 'trumped' with an !important statement!)
From what I've seen though, through testing and some Google / SE searches this is not the case.
Is it possible for #media style rules to inherit from applicable earlier statements or am I stuck with having to repeat all the rules I need for each statement? (not very DRY)
I'd really appreciate any help and clarifications / explanations for this.
Firstly thanks #BoltClock (for both comments), and to the other comments and answers for all your help.
I think I made a mistake in my media queries and/or was miss-understanding how they worked and interacted together. I was going to edit my question with the following but decided it would make more sense as an answer (since it's the solution I used). I apologise if this has wasted anyone else's time.
Here's my fixed snippet of code:
#media only screen
and (max-width : 480px) {
.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }
/* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
#media only screen
and (min-width : 421px)
and (max-width : 480px) {
.page .alpha { font-size: 3em; }
}
I realised from your comments that if I increased the max-width in my first block to cover the necessary range/limit I could then either nest or add the second block after it (I tried both and they both worked for me -- using chromium browser [18.0.1025.151]). This successfully gave me the desired result, in that the page .alpha element's font size increased at the required stepping/interval.
Thanks again for all SO'ers who helped!
(and to SE for the awesome communities they've helped build)
Knowledge > OpenSource > Freedom
If you want to work from mobile up, you will need to set the mobile layout as the default layout. (Remove the query). From there the queries will inherit from above.
.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }
/* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
/* Increase the main title for slightly larger screens! */
#media only screen
and (max-width : 480px) {
.page .alpha { font-size: 3em; }
}