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).
Related
I know this may seem like a very simple question, but please understand I know very little about CSS.
Essentially, I have a responsive website with two columns. I want to add an ad on the right for Desktop, and one of the left for Mobile. So far so good, I only have to copy and adapt the code they provide on their website, and this did work for mobile, hiding the ad:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
#media (max-width: 400px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
However, how can I adapt this for desktop? I assumed all I had was to change the max-width: 400px to min-width, but it doesn't seem to be working at all... any ideas on why, and how can I fix it?
In many cases scripts that insert content dynamically tend to modify the element's inline CSS properties and that usually overrides the style definitions, because of specificity. You can learn more on specificity in CSS on MDN.
What I would recommend you to do is to add !important to your style definition to see if that does hide the element. Your style should look something like: (I added some extra info to the #media query.
.adslot_1 {
display:inline-block;
width: 320px;
height: 50px;
}
#media only screen and (max-width: 400px) {
.adslot_1 {
display: none !important;
}
}
What you could also do is open your browser's inspect tools (developer tools) and inspect that specific element to see which styles are being applied and also check that based on media query.
First, let me say I've looked all over for this solution and am completely stuck. I've followed suggestions of importing media queries from a separate file after my other css rules, I've used an ancestor to target the span in the query to try and override the inline styling, I've tried just about everything else I can think of.
Currently, I have a span with nested spans that I want to render when the page width is between 0px and 600px. I am using react so I had to follow their guidelines for inline styling. Essentially I created an object with the display: none styling rules as the key-value pair. I then passed that to the JSX for the span. So essentially, it looks like this.
const hidden = {
display: 'none'
}
...
<span className="blah" style={hidden}>
<span>blah</span>
<span>: </span>
{deleteButton2} //this is a separate span generated conditionally, doesn't relate to this.
</span>
So now I have in my media query:
#media screen and (min-width: 0px) and (max-width: 600px) {
//other rules that work fine
...
.blah-ancestor > .blah {
display: inline //I've tried inline, inline-block, and block, none of which are working.
}
}
Please, I really need some help here. I'm quite literally pulling my hair out over this and I have 0 tools in my toolbelt to deal with this kind of bug as I've never run into something quite like this yet.
Inline styles always have priority over internal or embedded CSS, and over external CSS. This is shown to some degree on the <style> MDN documentation.
You could simply remove the inline styles and use two media queries or the mobile-first approach to show/hide the .blah.
Here is the mobile first approach:
// Smallest screens 0px - 600px, no media query
.blah-ancestor > .blah {
display: inline;
}
// Small screens above 600px
#media screen and (min-width: 601px) {
.blah-ancestor > .blah {
display: none;
}
}
This way you completely get rid of inline CSS and with that, you eliminate some of the priority issues.
I am using Node child theme for my site. The header and menu works fine in the desktop mode but when it is shrinked to responsive mood the heading with menu disappeares. I have tried allmost all the options but none is working. I couldn't find any documentation of the theme and any specific solution on the net. My site url is-
http://onlineinternetquest.com/
Add This code in your mobile media query
header.edgtf-mobile-header {
display: block !important;
}
header.edgtf-mobile-header .edgtf-mobile-header-inner {
height: auto;
}
You have media-query in your css that says under 1024px display: none; to head.
See screen shot from F12:
So remove this media-query:
media only screen and (max-width: 1024px)
.edgtf-page-header, .edgtf-top-bar {
display: none;
}
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
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á!