I'm seeing some nasty side scroll on mobile devices. I have two #media queries set, tablet and mobile.
dev.bdbshop.com
#media only screen and (max-width: 767px) {
.wrap { max-width: 300px; }
Is this the issue? Is there a better way to do this, e.g. use a percentage?
Should I add a third #media query and set more specific percentages? Currently there are only 2 break points that are rather wide.
I have checked your code <div id="sidebar-footer" class="sidebar">
You know What is the exactly width of this element? You have used mentioned its width to more than viewport 100%.
#sidebar-footer {
clear: both;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
overflow-x: visible;
overflow-y: visible;
width: 104.255%;
}
Use 100% instead of 104.255% . It works fine with it.
Follow-up question, do you personally think it's worth it to add another #media screen break point lower then 767px? For instance 320px for older mobile & iPhone?
Related
I am working on developing this site and am at a loss for why, when I try to generate a sticky footer for scrolling pages such as the linked one, it will not scroll on a mobile device (tested on an iPhone in Safari and DuckDuckGo). My goal is to add a sticky footer such that the footer is at the bottom of the page always (not at the bottom of the viewport always).
I have tried to change the positioning of the footer using fixed, absolute, or relative. For fixed, it will scroll but the footer stays at the bottom of where the viewport initially was. The latter two both result in being unable to scroll the screen in mobile. However, Chrome Developer Tools using a mobile device (namely an iphone) will produce the desired behavior). I have tried various tutorials including this one on sticky footers.
I currently have my footer formatted as such,
.site-footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
background-color: white;
}
With a responsive setting for mobile that modifies a couple parameters,
.site-footer {
position: relative;
margin-bottom: 20px;
}
I realize this is not a full minimum reproducible example but I'm struggling to generate something that is portable enough to share here. Thank you.
Remove this code and you will have sticky ;)
#media only screen and (max-width: 600px)
#media only screen and (min-width: 300px) and (max-width: 767px) {
.site-footer {
position: relative;
margin-bottom: 20px;
}
}
I am having trouble developing a website using Bootstrap. I am currently trying to have a margin on the side, when the screen or viewport is too big. But when I finally got it, it broke the responsiveness of the page.
The whole body is inside this div to create the margins:
div style="width:1300px; margin:auto;"
Add this media query to your CSS and make sure it's referenced after any other CSS:
#media screen and (min-width: 1300px) {
body {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
}
How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }
Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.
Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}
I'm not a css expert and struggling a bit with this need.
Consider this site
Right now the logo image is sized nicely for mobile but looks way too small for desktop browser.
If I change the size to look good on desktop browser it doesn't size down for mobile and consequently blows out to the right.
I feel these are the css settings involved but of course open to further instruction.
So the image size is 3800 X 1200
The actual image style I THINK should remain at 100% and not exceed 240px.
These settings will make it look acceptable for the mobile but then too small for desktop.
<img alt="Northern Legacy Auto" title="Northern Legacy Auto" src="http://localhost:15536/content/images/thumbs/0000020.png">
#media (min-width: 240px)
.header-logo a img {
max-width: 100%;
}
....
#media (min-width: 240px)
.header-logo a {
display: inline-block;
/* width: 195px; */
height: 118px;
line-height: 0;
background-repeat: no-repeat;
}
If I reverse the settings then it will look great on the desktop and blowout (not dynamically resize) on the mobile?
Thanks
Are you sure you are looking for the media query solution? You might can just get away with a responsive image. JSFiddle
HTML
<img src="http://placehold.it/200x100">
CSS
img {
width: 90%;
max-width: 240px;
margin: 0 auto;
display: block;
}
I've set up a media query that should center an image when the screen is smaller than 600px. When bigger then 600px, the image correctly displays to the right of the site title. Chrome inspector assures me that the queries are working, but I think there might be an overarching rule that's keeping my margin: auto from applying. The 'globes' image in question is at the top of:
http://livinginbetween.org/temp/
I'd love any suggestions. Thanks in advance for your time.
Add display: block; to your media query to center the image.
#media only screen and (max-width: 599px) and (min-width: 0px) {
.globes {
display: block;
width: 159px;
margin: 0 auto 0 auto;
}
}