I am trying to make my opencart responsive. I followed the instructions from here: How can i make my current opencart theme responsive?
but every time I want to change something in mobile.css it affects desktop.css. For example I put #footer{ display:none;} in mobile.css but as a result it kills footer in desktop and tablet.
Do I miss anything?
The mobile.css will still affect other screen sizes. Wrap your desktop.css with this:
#media (min-width: 970px) {
}
To display the footer add this to the desktop.css (within the media query above):
#footer { display: block; }
Based on your comment above it looks like you should change "max-width" to "min-width" in the media query on desktop.css.
Related
I'm pretty new to Wordpress modding.
At the moment, I'm using the Shift Nav plugin and I've set it to appear when viewport < 767px. This means that the original logo is there regardless of viewport size.
From the CSS I know that the class for logo is set for media all. I would like:
media (max-width: 767px) { display:none; }
But I don't know how to override the existing css code. I've tried adding the above CSS to the CSS editor and obviously nothing happens.
I don't understand what appears to be inline css, see here:
The site is here:
www.thegraduated.co.uk/store
Thanks in advance
You have a style attribute of display:inline-block in your html tag. You can use !important to overwrite that.
.site-logo-anchor a img { display: none !important; }
On mobile devices, my post's title and date are clashing and overwriting each other. This looks awful. Here is my site. http://defensionem.com/200-russian-soldiers-along-with-t-90-tanks-in-syria/
It is on Wordpress.
How do I fix this? There are no options in the Theme and I can use Custom CSS.
I tried to hide the date but it did not work.
.meta--items_fl{
display:none !important;
}
What you can do here is write media queries to hide specific elements or change their related css at certain screen lengths. For example,
#media only screen and (max-width: 700px) {
div.meta--items.fl {
display: none;
}
}
The above code would hide the date at a screen width of 700px and below. You can mess around with the width the breakpoint triggers to see what works best for you.
To learn more about media queries, you check this out. Hope that helps!
After searching for a while, I found this WordPress template http://demo.wpmultiverse.com/newsted/ that suits my simple needs. But the problem that I am having is the responsive feature of this tempalate's homepage. All the other pages work fine while the homepage is broken when I resize the width of my browser to be that of a mobile screen. Even if I view it from my mobile screen it is broken.
I tried clearing the divs and I have messed around with the CSS for some time now but I can't get to the root of the problem. I am unable to understand why other pages work fine with the same CSS style and only the homepage with the posts list is messed up.
Put this on your custom css:
#primary-sidebar .widget {
float: left;
}
But you still need to set the media queries for mobile and tablet
and put the code above.
use this one:
#media (max-width: 768px){
#primary-sidebar .widget {
float: left;
}
}
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I'm working on this site:
http://stephaniebertha.com/indev/solartrak/
And I seem to be having a problem with breakpoints and general width responding to the layout. When you resize it and it starts to get down to 780 width, the layout breaks and it looks weird (the menu goes to a light gray color).
These are my media queries in custom.css (and in this order):
max-width: 480px
min-width: 481px
min-width: 769px
Is this correct? Should I be doing them in this order? Any help you can throw my way would be helpful. Thank you!
I think you need to reorganize your css thinking better the rules which ones you want for all devices sizes and which ones you don't
Example
in your custom.css you have this rule
#media only screen and (min-width: 769px) {
.navbar-default {
background: none;
border: 0 !important;
}
header.main {
height: 42px;
background: #f7941d;
}
the color of the nav bar shoul not be inside a #media rule thats why your nav get grey is smaller screens
and also read the documentation of the bootstrap grid it will help you a lot
Breakpoints for Bootstrap 3 can be customized here:
http://getbootstrap.com/customize/
Under the headings 'Media queries breakpoints' and 'Layout and grid system'... It's a good idea to use a custom version so that you're choosing which files are relevant to you, and are compiling your own custom build of Bootstrap.
You can look inside your bootstrap.css file to find out where the breakpoints are set. If you use the same ones in your stylesheet the breaks should match up!
// Your link isn't live any more so I'm afraid I can't answer questions about that.