My site coded using the 960gs framework works fine on the PC, whereas it has a problem when viewed on a mobile device.
The problem is with font-size, I have two grids with divs having similar properties,
<div class="grid_4">
<h2>About Us</h2>
<div class="pBody">
<p>Morbi feugiat pharetra faucibus.</p>
</div>
</div>
<div class="grid_8">
<h2>Blog Updates</h2>
<div class="preBody">
<p>Morbi feugiat pharetra faucibus.</p>
</div>
</div>
The css is similar for both the text divs, I'll list them below,
.pBody {
text-align: justify;
color: #858585;
font-size: 13px;
}
.preBody {
text-align: justify;
color: #858585;
font-size: 13px;
}
The text in the smaller grid i.e. grid_4 appears normally when viewed on the phone whereas the text in the other div i.e. grid_8 appears bigger. I've removed a few styling divs to keep it short.
I'll attach a screen shot to make things clear,
I'll be grateful to anyone who could help me out with this.
Regards,
Vinith
Related
I'm looking for styled or colored horizontal lines, preferably with success, primary, warning classes.
A similar concept to colored links.
I couldn't find this topic on Bootstrap's website.
I found a few working solutions referring to Bootstrap v4.
In my case:
<div class="divider py-1 bg-success"></div>
It works, but I guess it's not the best practice...
Yes it does. Part of the Reboot, and is present in both Bootstrap-reboot.css & Bootstrap.css. It defines the <hr> as:
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
Also, Bootstrap 5 has moved a lot of its UI control over to utility classes... that gives you a far richer control of your UI. For example, if you wanted a "danger" / red colour <hr> you could use:
<hr class="bg-danger border-2 border-top border-danger">
Have a look at the Utility classes in their docs.
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-1 border-bottom"></div>
This should work
Using hr with the spacers helped me. Example horizontal rule that has a bit of space on top and bottom:
<hr class="mt-1 mb-1"/>
I'm trying to override the colors on my material input elements to always be white. This includes the outline of the input/select field, the placeholder, and the text itself even when the field is out of focus.
I did read through the official material overriding styles guide, but I found it a bit broad and was hoping for some more direction to do this.
This is my code:
<mat-card class="coverage-card">
<mat-card-content>
<form>
<mat-form-field appearance="outline" class="address-zip white-text">
<mat-label>Square Footage</mat-label>
<input type="number" matInput>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
css styles:
.coverage-card{
min-width: 400px;
max-width: 620px;
background-color: #FF6A13;
height: 575px;
border-radius: 20px;
}
.address-zip{
max-width: 190px;
margin-right: 10px;
}
.white-text{
color: white;
}
The out-of-box material color only applies when the field is focused on. I haven't been able to find the style that is being applied to the outline or placeholder when the field isn't in focus.
I tried overriding classes like .mat-form-field-appearance-outline in styles.scss with an !important, just to see if I could find the right class and haven't had any luck yet.
Not in Focus
Focused
Filled In
EDIT:
How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart
http://jsfiddle.net/dP93u/
<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>
New EDIT:
The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.
I will suggest you to build two barcharts, set their offset such that they get aligned, take care that only one will have the xAxis.
Hope this will be useful for you.
If you would't mind including bootstrap.css library, the solution is pretty simple. Check this fiddle.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Do you intend: how can I have value labels between the two bar series?
You can done it via css:
<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>
and some refinements of HighCharts code. See jfiddle.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?
The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.