my problem is that i experience white spaces on my mobile version between slider images on the following website: athleteperks.co.uk
I've been told to you use the following code:
}
.swift-slider-outer {
height: auto !important;
}
this code removes the white spaces between my sliders on my homepage, however it removes my header slider on the mobile and desktop versions.
In your CSS you need to remove the following line:
.swift-slider-outer {height: 600px!important;}
it is within your #media (max-width: 768px) media query. This is forcing your slider to be a certain pixel width and is overriding your solution which is .swift-slider-outer { height: auto !important;}
FYI - !important is got great practice. It's always best to try to see what exactly is going wrong first.
Related
I wanted to change how my site displays my products on a mobile device.
As standard it was displaying one item per row and i wanted to show two items per row.
I used the following CSS to acheive this:
#media only screen and (max-width: 600px) {
.product-item{
width: 50%;
}
}
I tested in chrome and firefox browser tools and it appeared to work fine on mobile view.
On a real phone there is white gaps and sometimes only 1 item per line.
Can anyone help? My website url is: DELETED URL
Update: Screenshot of what happens DELETED URL
Your code is missing this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Without the viewport some mobile browsers wont display your page correct.
Take care that all classes or ids you want to be reponsive are corret declared
for each device.
add media queries for devices you want to support,
this list from css-tricks.com could be helpful:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
if you want to align everything in a correct row the classes eventually need a float declaration:
#media only screen and (max-width:600px) {
.product-item{
float : left;
width: 50%;
}
}
If you get spacings that should not be there, there is very simple solution:
*{
margin : 0 ;
padding : 0 ;
}
Your css also suffers some parse errors which could also lead to some
errors.
Here is a unicorn test of your shop:
https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Fblupstore.com%2F&ucn_task=conformance#
I found a temporary fix. I used:
#media only screen and (max-width:600px) {
.product-item{
float : left !important;
width: 50% !important;
border: red solid;
box-sizing:border-box
}
}
I could see the first item was messing up the layout. I removed it from the category and re added it at the bottom. This is by no means a fix but it is a good solution to fix the display while i fix the parse errors.
This wouldn't have been possible without the help from #Thorsten Wolske and #Nikhil Gangurde
You can add some css style.
#media only screen and (max-width:600px) {
.product-item:nth-child(2n+1) {
clear: left !important;
}
}
I have an issue when printing from a twitter bootstrap appplication.
https://hod-nav.herokuapp.com/members/H0252#
When trying to use the print button, or just file > print, the #sidebar-wrapper still takes up real estate on printed pages.
This only occurs om PC Safari, Mac Safari, and Mac Firefox.
I'm using BS 3.3.6.
I've done a ton of things.
• My css is set to media: 'all'
• I've played around with BS print style sheets like so...
#media print {
#sidebar-wrapper {
display: none !important;
visibility: hidden !important;
}
• I've added the mysterious class="hidden-print" to the element in question.
• I'm able to hide things that don't need to be printed with print style sheets like the above.
• I've also added additional selectors from the cascade to target the element very specifically.
As you can see from either clicking the print button, or just a basic CTRL/CMD + P, the problem browsers listed above want to keep the 250px+ white space at the left, vs. allowing the main container div with the map in it to print at full width as in other browsers.
Just wondering if anyone else had come across this issue in these browsers or others.
I'm happy to proved additional information.
Thanks in advance for reading and thinking.
Sincerely,
Dick
It's not the #sidebar-wrapper taking up space in the layout, it's the left padding of the main element, which you need to disable on print:
#media print {
#wrapper {
padding-left: 0;
}
}
This needs to be placed at the end of your styles, to override the #wrapper selector inside #media (min-width: 768px). Alternatively, you could use div#wrapper instead of #wrapper and it will apply regardless of its position in the CSS file.
And, by the way, none of these ids have anything to do with Twitter Bootstrap.
Looks like there is padding in your wrapper element ->
#wrapper { padding-left:250px;}
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!
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.
Im using the bootstrap examples with Meteor (fluid.html). I've updated my bootstrap to the latest 2.0.4.
However I'm having an odd problem with the padding-top: 60px; conflicting in the wrong way with
#media (max-width: 979px)
body {
padding-top: 0;
}
and well.. webkit seems to do this (only on Meteor for some reason):
It ends up looking like this:
(Theres a gap at the top above the black bar) - Of course this is the fluid layout so the browser needs to be dragged down to small view (for iPhones/Androids/Tablets)
How would I manage to get the browser to take padding-top: 0 as the preference so It doesn't do this? Or why is it doing this (the css files are loaded in the same order - first bootstrap.css and then bootstrap-responsive.css. I can't figure out the difference
(its supposed to be like this: http://twitter.github.com/bootstrap/examples/fluid.html)
After upgrading to 2.0.4 I still had the issue where at certain resolutions content would get hidden when using navbar-fixed-top. This is what happens at certain resolutions:
After tweaking the CSS I came up with the following which fixes it at all resolutions when added to the top of my CSS file:
#media (min-width: 979px) { body { padding-top: 60px; } }
Hopefully this will sort out your issue.
It does not just do this...
It does more than that. You should inspect what padding-top is set to instead, go through the whole panel and see what is setting it, this should tell you where the problem lies. In a really worst case you could use padding-top: 0 !important; although it should be known that !important is bad advice and you should be able to get around not having to add that.
I don't see how Meteor is responsible as they don't add in any major CSS changes as far as I am aware of; but it might be that there is, but you can only tell if you look where padding-top is set.