I think I am going insane. I cannot figure out why this pricing field all of a sudden stacks below 641 px. Can anyone help me out?
I think I need a new set of eyes to look at the code!
http://forfattarskola.staging.wpengine.com/bildkort/bestall-bildkort/
Good
Bad
Without the code to look at and just the page source it looks like you need to change this css class to use inline-block and not block
#media only screen and (max-width: 641px) .gform_wrapper .ginput_container span {
display: inline-block;
}
try:
#gform_fields_4 li {
min-width: 200px;
}
#gform_fields_4 li * {
display: inline-block;
}
i tested this on your page through chrome debug, and seems to work. add this CSS to page and voilá!
Related
I have my website looking just how I want it on a desktop. I have come to adding a media query today thinking it would be as straight forward as its been in the past for me, but it doesn't want to work for me this time. I have added the meta view port (automatically added with Emmet shortcut '!') but no dice.
I just want to switch the flex direction to column and the divs to 100vw. I added the yellow colour here as a visual reference for myself.
#media only screen and (max-width: 720px) {
text__main {
min-width: 100vw;
background-color: yellow;
}
container {
display: flex;
flex-direction: column;
}
menu {
display: none;
}
}
Any guidance would be massively appreciated. The website is currently an eyesore and reflects badly on the content.
Many thanks.
Seems like you wrote your CSS selectors incorrectly. Instead of text__main try .text__main and so on with other selectors (menu could be an HTML tag, so maybe it should stay as it is now).
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
can someone please help me about this Wordpress CSS problem. On the checkout page the payment methods float right and for some reason the method description text is 'vertical', instead of having sentences in the full row, only 2 or 3 letters appear in each row (image included).
When I change the window size (and on mobile) everything looks okay.
Can anyone help me with some css code which would fix this? I don't know how to edit stuff that isn't in styles.css.
The problem
when i resize the window / mobile screen
The link:
https://zelenakuca.com/checkout/
Thank you!
Paste media code with style before line code
</style><noscript><style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head> in index page or file.
#media (min-width: 1025px)
{
#order_review {
width: 100%;
}
}
Please try these CSS:
#media (min-width: 1025px){
#order_review {
float: none;
width: 100%;
}
}
I've built a page using Wordpress, and am now trying to modify is using CSS. I want to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:
.content-area, .content-sidebar {
padding-top: 72px;
}
However, when I insert the following into my style.css:
.content-area{
padding-top: 0px;
}
the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?
sometime time this property can be inherited by parent class so you can try to this code
.content-area, .content-sidebar {
padding-top: 72px !important;
}
Thanks all. I changed the CSS to:
#media screen and (min-width: 846px) {
.content-area {
padding-top: 5px;
}
}
and the padding disappeared. Other media queries in CSS aren't as intuitive, but at least this works for now.
I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.