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.
Related
I'd like to have a single h1 tag and have different styling for it. I'm not sure if my css is the easiest way to do it? I"m using bootstrap so maybe there is a more concise way?
I have the following HTML:
<h1>Hello I am an h1 tag</h1>
And following css:
h1 {
color: yellow;
font-size: 32px;
}
#media (min-width: 576px) {
h1 {
color: red;
font-size: 60px;
}
}
Refer to link bootsrap
Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.
Then Best way as I know is to use media queries.
Viewport is another way for this. But not all browsers supports link info. Then most reliable way is to use media queires
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.
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.
I have been working with this new technology for me (Responsive Design) and I hate the problems which I don't know the answer, I get frustrated :/
Here is my code: http://jsbin.com/ejadej/1
With the latest version of Chrome, I see the site how is supposed to be by my code, whilst Firefox isn't reading this media query
#media screen and(min-width: 960px) {
#php-info-title {
background-color: #322E2C;
position: absolute;
left:100px;
bottom: 0px;
color:white;
z-index: 0;
max-width: 300px;
}
}
It's just ignoring it (if I remove the media query it works well, but i don't want to do that).
The curious thing is that with the other media queries written above that one, Firefox works well.
What's going on with Firefox?
Thanks for your help.
Per spec, you need a space between the and and the (. If you don't have it, it's not a valid #media rule.
I filed https://bugs.webkit.org/show_bug.cgi?id=117396 and http://code.google.com/p/chromium/issues/detail?id=248043 for what it's worth.