Alright so for some reason I've been trying to figure this out but can't. What's wrong with this? It's not being called at all. I'm trying to basically setup a simple responsive theme.
It is kind of strange inside the notepad++, when I type like #medi it will be blue but once I add #media it will go black.
#media only screen and {min-width: 150px} and {max-width:600px} {
body {
width: 100%;
font-size: 100%;
background-color: black;
}
#header {
width: 50%;
height: 50%;
margin-top: 10px;
}
}
Change your curly brackets to round brackets and it will start working..!
#media only screen and (min-width: 150px) and (max-width:600px)
Related
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;
}}
this is not sublime problem, my code
#media(min-width:801px){
margin: 0 auto;
margin-top: 40px;
margin-left: 370px;
}
shows in sublime the margin is in white color.. then I test in my browser, and as expected, the css doesn't apply.. the syntax above should be fine.. what is this happen?
You need to define a selector within the media query, e.g.
#media (min-width: 801px) {
body {
margin: 0 auto;
margin-top: 40px;
}
}
http://jsfiddle.net/g7MVx/2/
You aren't applying those margins to any elements. A media query wraps around regular CSS selectors like so:
#media (min-width:801px) {
.myClass {
margin: 0 auto;
margin-top: 40px;
margin-left: 370px;
}
}
Refer to MDN's CSS media queries page for more information.
#media only screen and (max-widht: 510px) {
.nav__ul {
display: none;
}
}
Same problem, trying to apply this code, the ""max-widht doesn't appear as a posible property and stays in white. It doesnt. I have to copy the code from the web to make it work.
you can define in scss this way,
for example,
body{
#media(min-width:801px){
margin: 0 auto;
margin-top: 40px;
margin-left: 370px;
}
}
I’m trying to horizontally center my logo on for my mobile version of my site. I can’t get it to center, though. I’ve tried various things but nothing seems to move it.
My code is:
#media only screen and (max-width: 640px) { .logo-image .logo img {
max-height: 70px;
margin-top: -15px;
margin-bottom: 15px;
width: auto;
background: center;
}
}
For h1.logo try text-align:center;
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 {
/* ... */
}
}
This is the website, and more specifically, the page.
I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.
#media only screen and (min-width:768px) {
.site-navigation .nav-menu {
display: block;
}
}#media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}#media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}
That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?
The first thing I see is that this HTML is not closed:
<div id="header" onclick="location.href='http://camillagabrieli.com
That needs to be fixed first. Try adding outlines to your CSS:
* { outline: 1px dashed black }
I find that helps a lot when it comes to seeing what's actually wrong with the different floated elements. There are quite a few things wrong with your arrangement and your CSS. You don't need to relatively position all of these things.
To fix the main content section:
Add the following to #main:
overflow:hidden;
And make #content and #sidebar-primary like this:
#content {
float: left;
width: 75%;
margin-left: 40px;
margin-right: 10px;
margin-top: 10px;
min-height: 50px;
}
#sidebar-primary {
float: left;
width: 20%;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
height: 50%;
}
I'm not sure why you had margin-top: -460px; in your code, but that was what was breaking it, as was the fact that #main wasn't actually containing #content and #sidebar-primary. The code still needs cleaning up, but this will fix it more immediately.
Does this help?