I am working on a web api, in UI the container is just distributed to certain amount of browser window where there is content but I want to distribute it all over the browser regardless of the content.
CSS
.container {
margin-right: 10px;
margin-left: 10px;
margin-top:20px;
padding-top:70px;
*zoom: 1;
border:none;
background-color:aliceblue;
}
Screen Shot
In the below screenshot it can be seen that the lightblue(aliceblue) is just distributed upto some extent and remaining was grey. I would like it all aliceblue
Add height: 100%; to your container and it should be fine
Related
I am attempting to make a webpage mobile responsive however the images in the flexslider on smaller screens, goes askew. Whether it was loaded or scaled down, the image to the right encroaches on the current image.
I would post an image but I need more reputation points.
I am trying to figure out how to push the current image being viewed over so that the edge of the next picture isn't being shown prematurely.
Just needed to add a media query to apply margin-left at a certain point. just couldn't find the rule to target for a little while:
.slides:first-child img{
height: auto;
}
//fixes the bug where the second image appears on the right on smaller screens
#media (max-width: 991px){
.slides:first-child img{
margin-left: 40px;
}
}
.flex-control-thumbs{
margin-top: 20px;
li{
cursor: pointer;
list-style-type: none;
}
}
This is an issue I've only just come across today and was wondering what could be causing such a strange issue.
I've had a look at a few example websites and they all experience the same issue. I've opened up the Chrome developer tools to check and the CSS relating to these elements appear under "#media all".
Basically when viewing a site on an iPad running iOS 8.1.2 it seems to ignore the CSS for specific elements completely. This is what it looks like on an iPad (bad):
http://i.imgur.com/wd4xnq4.png
Now this is what I see when using Chrome on Windows (CSS loads and is used, the good version...):
http://i.imgur.com/3aMNPXF.png
I've never seen this before and the CSS isn't loaded in with JavaScript with JS disabled so I'm completely stumped. Help please.
EDIT
Here is the code. I've double checked and it seems as if a class of .active is added when you click on it to show it is the current selected item.
EDIT 2
Here is all the code instead of just the buttons themselves:
.product-view .product-collateral{
width: 100%;
float: left;
margin:15px 0 0;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav{
width: 100%;
float: left;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li{
float: left;
margin:0 5px 0 0;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li a{
padding:10px 15px;
display: block;
background-color: #bcbec0;
color: #fff;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li.r-tabs-state-active a{
background-color: #fff;
color: #333333;
}
.product-view .product-collateral #product_tabs .tab{
width: 100%;
float: left;
background-color: #fff;
padding:15px;
}
What browser are you using to test it on the iPad? Google chrome also? Are you using browser-specific rules for your CSS? Some elements need to be declared multiple times according to the browser in use.
I've figured out the issue. I wasn't the developer that originally worked on this so it was a head scratcher to begin with.
It turns out the resolution of iPads fell directly in between the mobile view port size and the desktop view port size so so I just need to place the mobile CSS inside a new media view port specifically designed for iPads. I'll post my findings but this should work (hopefully).
EDIT
Yep, so it turns out there was a media query that was set to big and fell between the two target sizes and the iPad size was right in the middle.
So essentially it was just a display: block; that was outside a media query which meant all the CSS was missed and thus only displayed the text. Solved!
I'm trying to figure out a way to have a certain amount of space between the top of my footer and a div.
Right now each page is of a different size and I'm adjusting this manually. The biggest issues I'm having is across different formats of web browsers my manual space is changing. and on a couple pages I have a js questionnaire, when the questionnaire is completed my div slides down over top of my back and next buttons. I corrected this by creating a new CSS style for it.
Is there a way I can set my div (Which is a box with text) to align on every page the same distance from the footer and on every browser. Right now my code is only working correctly in IE9.
Here is the CSS I'm using:
#mainInfoBox
{
margin-bottom:-35px; !important;
clear:both;
min-height:2em;
height: auto !important;
height:32px;
padding: 2px 3px 0 3px;
border: 1px solid #4c6352;
background-color:#f2f684;
color:#000;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
display:block;
position: relative;
}
And this is what I'm using in the html, though that values change on every page:
<div id="mainInfoBox" style="margin-top:193px; clear:both">Blah Blah Blah</div>
Assuming your footer is the same on every page, you can set a fixed height, or at least calculate the height of it. Then absolutely position the div you want on top of it using the bottom property like so:
footer { height: 250px; }
#mainInfoBox {
position: absolute;
bottom: 260px; /* so it is 10px on top of the footer */
}
Hi all using twitters bootstrap: http://twitter.github.io/bootstrap/base-css.html#tables
I am wandering how I can stop this happening: http://img823.imageshack.us/img823/6606/screenshotfrom201306071.png
I want the images to resize with the window until it gets bumped up above the text from bootsrap.
Link for it: http://www.prxa.info/articles/category/1 User: test.prxa. pass: test
I NEED images to have a max of 350px here as some images people include are massive and have to be resized to not mess it all up.
Here is my custom css for the thumbnail area and the images inside:
.thumbnail
{
width: 350px;
height: 220px;
display: table-cell;
vertical-align: middle;
}
img.tagline-img
{
max-width: 350px;
max-height: 220px;
}
Not the best responsive technique but it will make it fit
Just use
img.tagline-img {
width:100%;
}
Just tested on your site
taken from bootstrap :
img{
border:0;
max-width:100%; /* Part 1:Set a maxium relative to the parent */
width:auto\9; /* IE7-8 need help adjusting responsive images */
height:auto; /* Part 2:Scale the height according to the width,
otherwise you get stretching */
-ms-interpolation-mode:bicubic
}
I am new to developing Windows 8 store apps, and I am in the process of creating my first one.
The app I am making is a note taking app. I only started the app yesterday, so it's still very basic, but I am having a problem with the scrolling. Here is a screen shot displaying the problem:
As you can see, when a certain number of notes are entered, they start overlapping the screen. What I need to do is make it so that when the notes a certain amount of pixels from the side of the display, it makes it scroll-able.
The divs that the notes are contained in are created as the note is written. The notes also auto change size depending on the amount of text entered.
Does anyone know how I would make it so that they scroll to the left and right instead of overlapping?
EDIT:
Here is the CSS:
body {
overflow-x:auto;
}
#textInput {
padding:20px;
float:left;
margin-top: 20px;
margin-left: 20px;
position:fixed;
}
#noteInput {
display:block;
border-width:5px;
border-color:purple;
box-shadow: 5px 5px 5px;
}
#titleInput {
border-width:5px;
border-color:purple;
width:285px;
box-shadow: 5px 5px 5px;
}
#noteSubmit {
width:295px;
}
#headers {
margin-left:100px;
margin-top:80px;
}
#hr {
margin-right: 40px;
margin-left: 40px;
}
#noteContainer {
float:left;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
margin-left:400px;
}
I haven't really bothered with the UI and design much yet, as I want to get all the background stuff like javascript, jquery, and azure working first.
I am only doing this app as a project for practice, for the 70-481 and 70-482 exams I have in two months, so its never going to be in the store or anything.
Thanks for your help
Cheers
Corey
I strongly recommend using a WinJS.UI.ListView control instead of writing the div elements yourself.
That way you'll not only get a look & feel to your application that's consistent with what the user expects from a Windows 8 Modern UI app but it will also take care of the scrolling and management of the DOM elements for you.
See this tutorial on how to create and style a ListView control.
I agree with #ma_il, but if you do want to add scrolling functionality to custom elements, you simple wrap those elements in a div and add some CSS properties to that div...
overflow-x: auto; /* to scroll horizontally /
overflow-y: auto; / to scroll vertically /
overflow: auto; / to scroll in both directions */
If the contents of that div are wider (or taller or both) than the screen then your screen will automatically become scrolling and touch will be supported.