My page is rendering extremely narrow on chrome. It wasn't doing this before I edited it, and the +1 button was the only thing I added. However commenting out that doesn't seem to fix it. Can anyone guide me into what's exactly wrong here? I've tried tracking this but I'm at a total loss.
Site
extra Css
.main-body {
padding: 20px 160px 0px 160px;
}
You should use a media query to clear this on mobile.
Example:
#media screen and (max-width:screen-xs-max){
.main-body{padding:0px;}
}
I always recommend using a container instead of a custom class. If you are using a row property without the container you aren't using Bootstrap properly. Main-body should be replaced with container. Then you set the widths on the container for each breakpoint. Solves a ton of headache and it's proper for Bootstrap.
Related
I'm working on a online-shop for a winery. Link to the page is http://develope.haimerl.at/shop. In the shop page all wines are shown with some information. Every second product div should be a bit smaller which works fine in screen widths under 1000px but doesn't work from 1000px or higher.
I'm working with a bought wordpress theme and was looking for any breakpoints in CSS that would explain this behaviour. When I'm setting a fixed height with the :nth-child operator it just cuts of the child elements.
Maybe, has anyone got an idea how could I manage that every second element is a bit smaller than the other ones?
Thanks in Advance
If you check your css code there one breakpoint which is affecting your pile-item-even-spacing class which has min-width: 999px.
#media only screen and (min-width: 999px)
.pile-item-medium-3d:not(.pile-item-small-3d):not(.pile-item-large-3d) .pile-item-even-spacing, .pile-item-medium-3d:not(.pile-item-small-3d):not(.pile-item-large-3d) .pile-item-portrait-spacing {
padding-left: 0;
padding-right: 0;
}
Please comment/remove and it'll work.
If you look at this website in Google Chrome's developer options, specifically mobile responsive toggle, it will overlap my portfolio section over my about section. I have tried a number of potential fixes from the internet, like changing the "display" and "positioning" in CSS. None of those worked.
As a side note this issue doesn't exist on local environment, only live.
Any suggestions?
P.S. This is a portfolio website. I'm not trying to solicit my information. It's just broken and looks bad on mobile. THANKS!
Well, try to removing the rule height: 100%; from the following classes:
.intro-section
.about-section
.portfolio-section
This solves the overlaping bug. You can still add a media query to reduce the padding-top from all sections. Something like that:
#media all and (max-width: 580px) {
.about-section, .portfolio-section {
padding-top: 70px;
}
}
Hope this can help you.
You can just remove the height: 100% from the body. This will allow the body to overflow, and not to stuck to the window's height maximum.
I have a problem when loading the mockup of my project on an iPhone.
The problem is that on my mobile device, most 100% containers seem to have some kind of a right margin or padding, which leads to content crash.
I really think that probably this is due to "viewport" stuff, which I don't know for now, but anyway, take a look.
when seen your screenshot, Your code is up to date, when I put my image in your code then it's working fine, so you can check your image width and check css
check with this #0a1a19 url("../img/img2.png") no-repeat scroll center center / 100% 100%;
If you want to make responsive then use bootstrap and you can get from here....Bootstrap
But you are used custom css so you need to use media query for different layouts like, tablet, mobile, etc...
and one more thing if you not getting perfect layout in your mobile view then must check your media query for mobile view.
Note: always use % (not px) to give the width of any image.
.header__inner has fixed width, change width to 100% and remove padding for mobile devices:
#media <params go here> {
.header__inner, .header__inner_mod {
width: 100%;
padding: 0;
}
}
Codepen
I am currently practicing creating responsive websites.
I have a problem with the side bar on this website,
I don't believe I know how to correctly position this,
and I also don't know how to keep it from moving down when the screen width size decreases.
How can I fix this?
I have such a hard time posting code, I can't seem to get it to work past the first line or two.
I added a jsFiddle with all of the code. I made a comment where the sidebar,
.other, in my css code.
http://jsfiddle.net/jwn69/
css :
/*
Well, first, i woudnt rely on properties like 'float'. They're tricky and can get a lot of repaints in some cases, which slows down your application.
To make what you wanted, i had to change de .focus and the .other classes
.focus {
width:66.00625%;
display: inline-block;
/* 844.8px / 1280 */
background-color: #3d3c3c;
}
.other {
width: 30.99375%;
display: inline-block;
vertical-align: top;
/* 1.5% allowed on each side*/
background-color: #3d3c3c;
}
I must also warn you that responsive design isn't about doing a couple of css rules that works under every condition/screen-size. With a little more CSSing, you'll get this page looks better and eventually it will be useable on any device. But, for example, mobile apps doens't have a menu like the one you're building. It uses drawer menus and other things to show links, because their space is limited.
While you can achieve to show these contents on a very a huge screen or a very tiny, it isn't enought because every device has it's own better way to show your UI components.
So, i'd suggest you read about media-queries. They're usefull to make specific CSS rules for devices that fit a certain condition.
Then, i'd suggest you learn how to positions work in CSS
Heres your fiddle
On this template I've built using Foundation, everything looks correct and responsive except for both navigation bars. They're both on their own <div class="row">, yet they overlap eachother on window resize.
(There is a #media only screen and (max-width: 767px) that is supposed to make it look even cleaner, if it helps at all).
Actually if you open the page on chrome with the developer tools or in firefox with firebug, you can see that when you make the page smaller than 767px width, is when the problems enters, due your #media only screen and (max-width: 767px). i would recommend to check that css cause if you removed it from the html you get a better result, so you may check what attributes inside that css are making your div crazy.
try adding foundation.css (around line 148) .row class height to 140px and moving main-links somewhere inside top of the main-content? That code seriously need either playing around with heights/margin or div blocks imo :)
Edit: roughly editing foundation.css lines is not what you need, make separate css class for that specific height setting and trigger usage of it with correct media query (width which causes problem to occur). That way you can tune any classes you like around the top navigation, its not pretty but it gets things work.
As Jorge Aguilar said, the problem lied in a float: none that was applied to every <li>. Furthermore, I used a width: 100% property to stretch the elements across the entire screen (like it originally was with the floats, but without the overlapping)