I have a little problem with Superfish navigation height in bootstrap theme.
-->testi4.aada.fi
I'm not able to reduce its height at all and there is this
element {
line-height: 113px;
}
if you check it with Firefox inspector and i do not know where it is coming from
Pls, help.
// Mika
What happens if you try using %'s instead?
i.e.
element {
line-height: 90%;
}
If that doesnt work, try some additional padding/margin within that element.
element {
line-height: 113px;
padding: 10px;
}
Another suggestion.. You can play with the values using Firebug under Firefox to get the correct value/setting..
Related
I'm trying to reduce the size of an input box on a mobile device and the css won't work.
I used google dev tools to get the name of the element (input#calc_shipping_postcode.input-text) but when I try and specify the width in CSS nothing happens.. the page is -https://ffe-dev.flowersforeveryone.co.za/flower-delivery/
the CSS i'm trying to use is -
input#calc_shipping_postcode.input-text {
width: 270px;
}
Can someone please tell me what i'm doing wrong? Thanks
The problem with your site is that width are set to 350px by inline styling.
This is caused from some wordpress plugin (maybe this set from WPBakey).
One solution is to find out what is causing this styling in wordpress then edit it.
Other fast workaround solution is to override ths by adding !important to your css property like:
input#calc_shipping_postcode.input-text {
width: 270px !important;
}
Instated of adding width in px use %. will work in all devices.
try this.
input#calc_shipping_postcode {
width: 100% !important;
max-width: 350px;
}
I have the following problem which occured in Safari 11. Safari browser does not "repaint" or "recalculate" the position of the text correctly when the styles are placed before closing body tag.
These styles causing the issue:
h1 {
letter-spacing: .2em;
text-align: center;
}
You could see the example here. The text will repositon when you click on it in Safari. Is there any workaround to position text correctly?
http://jsfiddle.net/rauot9tq/3/
or:
http://jsfiddle.net/rauot9tq/4/
In the picture below, there is misplaced text in the first line and doubled when clicked on it in the second line:
The answer to this issue is to force Safari to re-render the content.
Pure css solution is e.g. to set styles in <head> element to:
body {
display: none;
}
and in the footer:
body {
display: block;
}
Here is updated working fiddle: http://jsfiddle.net/rauot9tq/10/
Another soulution could be to force Safari to redraw using JS:
document.querySelector('body').style.display = 'none';
document.querySelector('body').offsetWidth;
document.querySelector('body').style.display = 'block';
fiddle with JS solution: http://jsfiddle.net/rauot9tq/11/
I've just came across the same issue and it looks like this yours is the only jsfiddle available with simple and proper reproduction, thank you. Though I think the cause of the issue isn't <style> before </body>, otherwise simple <span> inserted in between those two could fix the problem. I was able to solve the problem changing text container display property to inline-block, and adding width to it, so my text could still be in the center.
h1 {
letter-spacing: .2em;
text-align: center;
display: inline-block;
width: 100%;
}
Here is the fiddle: http://jsfiddle.net/rauot9tq/28/ .
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
This is a really odd one. I cannot seem to affect this one image via css at all. Tried adding a class specifically for the image and also writing css to affect just the image, but zip. It won't budge. The only thing that made it move was setting the neg. margin on the actual image, and there it only moved up about 40px and wouldn't go any further (taken that off since then). The image in question is the "imagine" tab (wp-image-39) on this page:http://circore.com/haute/. The bits of css I've left are:
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
I've also tried affecting all images in the content area and a bunch of other things. The red background is just so I can see if something worked. Argh! Thanks so much!
Instead of trying to put styles on the image, why not put styles on the containing div?
.toptab { margin-top: -50px; }
Would that suit your needs?
I would set position: absolute for the image. Then you will be able to move it freely with margins relative to its inline position.
The last 3 classes of your CSS
#text-4
{
font-size:11px;
line-height: 15px;
color: #000000;
text-align: center;
}
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
are inside #media print { which is actually not closed.
Put a closing bracket before #text-4 or wherever you need.
<div style="margin-top:-120px;">
Inline CSS would work also on the div that wraps around the . Hope this helps.
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}