I am trying to hide a Facebook like button when the browser is resized below a certain width.
I have the following code:
#media all and (max-width: 300px)
{
.fb-like { float: right; display: none; }
}
I have tested this on regular websites however it is not working within Shopify. Any ideas as to why?
It seems I could not reference "fb-like" within css I had to create a separate div to wrap around this before I could edit how it was displayed.
Related
I wrote a class with CSS properties and I want it in the way that the screen at my breaking point which I've decided then media query work how I can use the for example:
When the screen is larger than 600px then it works and
if the screen is less than the breaking point then this media query works.
.test {
width: 30% !important;
display: inline-block;
margin: 10px;
}
#media only screen and (max-width: 600px) {
.test {
width: 100% !important;
display: inline-block;
margin: 20px;
}
}
That is not working. Please anyone help me with this.
The CSS you provided is valid.
If you are not seeing the expected result, the following things may be happening:
There is no element in your HTML which has a class of test. — If you run document.querySelectorAll('.test') in the console and you are not getting any results, then there are no elements which match the CSS selector of .test.
The CSS is actually not being loaded. Maybe you are not putting your styles inside a <style> tag, or you are not correctly loading the stylesheet with <link rel="stylesheet" href="/path/to/your/styles.css"/>? — Your browser’s developer tools should show your stylesheet being loaded in the Networks panel. Alternatively, styles should be present on the page, within a <style> tag.
The CSS rules are being overwritten. Are there are any styles which are styling the .test element(s) after the above CSS rules are applied? — Your browser’s developer tools can show if styles are being applied or not.
Sharing your HTML will make it easier for people to help you.
I have a WordPress site and for some reason, some of my CSS styles does not being applied in any browser.
/* This rule is rendered in the browser */
.post-date,
.author {
font-weight: bold;
}
/* This two rules doesn't render in the browser */
figure.alignright,
figure.aligncenter {
text-align: center;
}
#media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
<p class="post-date">Some published date</p>
<p class="author">Author</p>
<div class="wp-block-image">
<figure class="alignright is-resized">
<img src="someImgageURL" width="100" height="100">
</figure>
<div>
For example I have the figure style which doesn't get applied.
And when I look in the Style Editor in Firefox or Inspector in Chrome I can't find the style. It's like it doesn't exists, and I can't figure out why.
You are using this:
#media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
It's mean browser has min-width 500px will run this css, so this css is overide your code above.
You should use
#media only screen and (max-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
Most browsers cache websites and their style-sheets, images and so on to safe bandwith.
This means you will have to force your browser to update the css file, which you can do by manually deleting the cache, or to disable caching completely!
Maybe you have some CSS syntax error before the line. (maybe extra bracket opened or something else)
I read all the comments you wrote and came to this conclusion.
You can test it with the below method.
Please remove all the CSS code in the CSS file and just leave the CSS section you want to test.
If it works then review the CSS code you just removed and check the typo.
Hope this helps you.
Thanks
I finally found out what the problem was. It was Wordpress own caching of the stylesheet that gave the problem. After clearing the Wordpress cache, everything is working as expected.
I applied the code below to fix the alignment on my desktop site but it's also creating an unwanted margin on mobile. How can I exclude this effect on certain #media styles?
.site-container {
margin-top: 60px;
The site is: https://shiftins.com. Thank you!
for example like this:
#media screen and (max-width: 600px) {
.site-container {
margin-top: 0px;
}
or did I misunderstand something?
I would first ask if you were using Modernizr and see if you were using bootstrap for your site - to help with all the media queries.
Adding Modernizr should solve your issue, if not then comment and ill show you an alternative way.
my site is http://psychicrx.com/ it seems normal till i get down to mobile view been looking around for a solution and not sure what to do It gives me a full screens worth of white space when i check it on mobile and have to scroll down to see the site content please help i am getting frustrated that i cant find this in the css and i dont know maybe there is a good plugin that would edit the code for me that is causing this issue thanks in advance
Your #mobile-navigation, #mobile-navigation-jquery goes to display:block when in mobile mode.
Change this:
#media screen and (max-width: 620px)
#mobile-navigation, #mobile-navigation-jquery {
display: block;
}
to
#media screen and (max-width: 620px)
#mobile-navigation, #mobile-navigation-jquery {
display: none;
}
The nav is occupying that space. You have to make it have no width when it gets to mobile.
#media screen and (max-width: 620px) {
.
.
.
width: 0;
}
The problem was a little css with #mobile-navigation-jquery i just put it to width 0 and it works fine now also i used a plugin that worked real well without me having to edit the themes css thanks
A website of a friend that was designed on Squarespace is located at www.diamondathome.com.
The site itself is mobile responsive, but the Facebook and Linkedin icons at the top of the homepage are not scaling and appear too large on mobile browsers.
I've tried many tweaks by adding custom CSS and nothing is working.
Can anyone give me some ideas on what the heck is going on?
Thanks!
Scott.
This will sort of fix it:
#media only screen and (max-width: 640px) {
.sqs-gallery-design-grid-slide {
width: 40px !important;}
img.thumb-image.loaded {
width: 20px !important;
height: 20px !important;
}
}
If you have access to the CSS file in Squarespace you will find this on site.css . Else you can add this to another css file.