I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}
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 just want to preface this with while Bootstrap carousel is being used, it's been greatly customized (though not by me) to be used in a SharePoint web part. I feel like that's important to note since there's potentially a lot going on in this particular environment that does/could affect the CSS.
That being said, I'm having troubles making the Bootstrap carousel responsive. I moved a lot of the styles around, but this is the latest iteration:
#Carousel {
max-width: 400px;
}
#media screen and (max-width: 926px) {
#Carousel {
position: relative;
width: 100%;
height: 0;
padding-bottom: 40%;
}
#Carousel .carousel-indicators, #jbCarousel .carousel-inner, #jbCarousel .control-container {
position absolute;
width: 100%;
}
}
I want the #Carousel container to be at most 400px; I tried to keep its aspect ratio, too. This doesn't work, what happens is that it stays 400px no matter how the window is resized. And since the children I set above are at width: 100%, they're also set at 400px, so nothing actually changes in size.
I have this Background img that I would like to put a contact form inside the computer screen as in the image bellow,
Is there a way to get the form to always stick at this position no matter what screen size (and without adding numerous #media queries..)?
You have to use the % unit in the css, so it will always going to be proportionally to the screen.
Ex:
form {
width: 100%;
}
.form_input-short {
width: 80%;
}
.form_input-big {
width: 80%;
}
I am working on a website that has a slideshow right under the header. I want to limit the height of the slideshow responsively so that if it leaves 20-30% of the viewport on one screen resolution, it will do the same on the other. Currently my CSS looks like this.
#slideshow-container {
height: 70vh;
margin: 0;
padding: 0;
overflow: hidden;
}
#slideshow-container img {
height: auto;
width: 100%;
}
The images scale responsively and I'm using the viewport units to accomplish what I want. However, viewport units aren't very cross-browser compatible so I'm looking for a way to accomplish the same idea across all browsers. I'd prefer to only use CSS and not JavaScript or jQuery.
Since I do not know your markup, it's more difficult to help.
I'd do it with following lines of CSS:
/*reset stuff so that body fits the entire viewport*/
html,
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#slideshow-container {
height:70%;
...
}
This should do the job.
But in my opinion there's propably no reason for not using viewport units since it's supported in most current browsers: http://caniuse.com/viewport-units
The only problem shall be the mobile devices (and IE, of course).
Picture the following:
A navbar on top, a sidebar on each side of the page (left and right) and a content div sandwiched between those asides. Everything looks great on a desktop.
Enter a media query for a single column layout for mobile view. Now the layout is Nav, left sidebar underneath, content under that and the right sidebar under the content.
My question is how to get the right sidebar under the left sidebar for the mobile media query but leave it untouched for the desktop view, without touching the markup and only changing the CSS. Here is a link to a fiddle to show what I mean:
Fiddle
Everything for the desktop layout is inside of a
#media only screen and (min-width: 768px) { }
CSS block.
I know you've asked for "only changing the CSS". So first of all maybe there is a solution with the new css order functionality. But then why not using a much simpler way with changing the markup only a little bit (DEMO).
In the following example I've removed every piece of code not needed to demonstrate the solution in your fiddle.
You could just move the right sidebar before the content element and then float them left/right in desktop mode.
.sidebar {
width: 20%;
}
.content {
width: 60%;
float: left;
}
.sidebar_right {
float: right;
}
.sidebar_left {
float: left;
}
In mobile mode, you remove the float so that the 3 elements get back to their original "markup position".
#media only screen and (max-width: 768px) {
.sidebar, .content {
float: none;
width: 100%;
}
}