I have searched most of the css files, changed the logo padding in theme.css, but I cannot remove the padding on the bottom of the site logo. There seems to be a 5px padding at the bottom. Is there a way to remove this? Thanks.
Edit: Here is the code in Air theme's, theme.css file, where I can only find logo css references. Thanks again.
.logo {
margin-top: 20px;
margin-bottom: 0;
display: block;
float: left;
padding: 0px;
}
.logo a {
color: #ffffff;
font-family: 'Cinzel', 'Arvo', serif;
font-size: 12px;
font-weight: bold;
}
[[1]: http://i.stack.imgur.com/abkoc.png][1]
The problem is not a padding. The issues comes from browser's interpretation of img in <a> tag. By default all browsers render image with 3px bottom space (and it's not a margin nor padding; just an empty space).
There are 2 ways to remove it:
Float image
Display image as a block
In this case I'd choose the first option.
.logo img {
float: left;
}
Related
I am coding CSS from scratch for the first time and I am getting a lot of trouble to make it the perfect way.
As you can see in this image, the blue menu in the top has a white border.
My current css code for nav is:
nav, footer {
font-family: "rogue-sans-ext", sans-serif;
font-style: normal;
font-weight: 700;
border-width: 0px;
padding: 0px 0px 0px 0px;
}
nav {
background-color: #005EFF;
width: 100%;
position: static;
top: 0;
left: 0;
text-align: center;
font-size: 25px;
}
By the way, I can't figure out how to center vertically the text of the nav items. I have tried the vertical-align option, the line-height method and the absolute positioning and negative margin, but none seems to work properly.
Thanks,
mikeysantana
Probably, your problem is given by the default body padding value applied by browser.
Try applying this style:
body, html {
margin: 0;
padding: 0;
}
I have a sales page here: http://salesautopilot.s3.amazonaws.com/newsletter/letter/nl57825/ns103923/subscribe.html
My problem is when I view the site on mobile, the text in the blue call to action button overflows the button.
How should I modify the button's CSS so it won't?
I think this is the part of the CSS code that defines the button:
.mmform-container div.submitcontainer a.submitbutton,.mmform-container button.mmform-event-button,.mmform-container div.submitcontainer button.submitbutton {
background-color: #208dda;
border: none;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.8px;
margin: 0 auto;
padding: 15px 0;
/*width: 70%;*/
min-height: 20px;
color: #fff;
text-align: center;
display: block;
text-decoration: none;
width: 70%;
}
Thank you guys
David
Your problem is that the last word is too long that with fixed font size and width it doesn't fit in one line. You could use word-wrap: break-word; to break that word, but then it's kinda ugly.
Imo best scenario would be to either:
reduce the text in the button (to just 'register') or
decrease the font size for smaller screens. For that you can use CSS media query.
if you just edit that way :
#media (max-width: 640px){
.submitcontainer a{
width:100%!important;
}
I have problem with creating "button" element (text in inline-block container with border), because in some font-size text has wrong vertical-align (is not perfect middle).
I want to use Raleway (Google Web Font) and Bootstrap.
Height of the text container is set by line-height.
I am testing it on Windows 7...
on Firefox (ver. 36) everything is perfect
but the problem is on Google Chrome (ver. 41)
Live preview: http://biznes-dynamit.pl/test/marcin-dobroszek/font/
Part of CSS code:
/*Bootstrap default style*/
* {
box-sizing: border-box;
}
.btn {
display: inline-block;
vertical-align: middle;
}
/*custom style*/
body {
font-family: "Raleway";
}
.btn {
padding-top: 0;
padding-bottom: 0;
line-height: 16px;
font-size: 11px; /*real height: 8*/
}
.btn-sm {
font-size: 10px; /*real height: 7*/
line-height: 15px;
}
.btn-lg {
font-size: 12px; /*real height: 8-9*/
line-height: 16px; /*light, normal*/
}
As you can see in Chrome preview in some font-size and font-weight text is go up relative container.
3x zoom sample, with font-size: 11px (line-height: 16px) and font-weight: semi-bold.
Top and bottom space (between text and top/bottom border) should be the same: 4px, but as you can see top space has 3px and bottom has 5px.
Is it possible to fix this browser issue?
This very annoying problem is caused by chrome not taking text-transform: uppercase into account. Use the following to get correct centering in Chrome with all-caps text:
text-transform: lowercase;
font-variant: small-caps;
Fiddle: http://jsfiddle.net/fyvyB/76/
Works great for buttons, for other usecases you might have problems with the text being small-caps and not real caps.
Had a similar issue with a custom font. After some playing around and trying all different display properties on the text element, I noticed that the vertical align issue only affected text elements whose parent was display: block;, despite said text element being set to display: inline;. I resolved the problem by changing parents to display: table; and the child text elem to display: inline;, e.g. below... I can't explain why this worked, but posting here in case it helps others...
<style>
div {
display: table;
}
span {
display: inline;
padding: 5px 10px; /* to make v-alignment clearer */
}
</style>
<div>
<span>Some text here</span>
</div>
I need to allow my Dropdown SubMenu to increase it's width automatically when I save any data with really long names. The dropdown box adjust itself weirdly in respond to my current code. (Image shown below)
P/S: My dropdown has to work on both Chrome and Firefox.
I tried many ways to solve it but I'm still stuck. May I know what are some other ways using CSS to solve this?
I tried changing float to float: left but it's not correct for me as I do not want to have the left-to-right scrollbar.
For submenu, if the data in it is really long, it doesn't matter if the alignment of the sub-menu doesn't align with the Main menu. What I need is auto increment of width.
Below is my code:
.ui-selectonemenu .ui-selectonemenu-label {
background: #c9e9e2 !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-list {
background: #c9e9e2 !important;
-webkit-padding-end: 0px !important;
float: right;
position: relative;
display: inline-block;
-webkit-column-width: 150px !important; /*words inside dropdown*/
/*For Firefox*/
-moz-column-width: 158px !important;
}
.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight {
background:#FFFFFF !important;
text-shadow: none;
color: #444444;
}
.selectOneMenu {
color: #444444;
font-size: 11px;
font-family: Verdana;
font-weight: 400;
height: 21px;
width: 158px !important;
}
As you can see from the image here, all the first letter from each word are being cut off.
jQuery might help here, using an if statement, you could have it so the dropdown menu increases its width automatically if the string length of an individual column within the dropdown menu is over a certain amount.
I have a page here: http://dev.textcube.ch/oneandonly/index.php/galerie/shima/ where the subnav is ok using the style #vertmenu however on another page where the styling and page layout is identical the subnav is pushed to the left http://dev.textcube.ch/oneandonly/index.php/galerie/yuma/
(username: textcube / password: textcube3600 as a login will popup to access the pages)
#vertmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin-top: 20px;
float: left;
clear: both;
background: url(../images/subnav_bg.png) no-repeat;
height: 180px;
width: 195px !important;
padding: 40px 60px 60px 20px !important;
}
I've no idea of why this is, I've checked the CSS and inspected the elements in Chrome on both pages to see if there is any conflicts and I can't see anything.
Please can anyone help me out?
Thanks
In the second page, you include view.css, which has the following rule:
* {
margin: 0;
padding: 0;
}
This removes the default padding on the ul. You just need to add the following declaration to your #vertmenu .nav rule:
padding-left: 40px;
By checking both the pages the extra thing in the second page is the presence of margin:0; padding:0 via view.css. It causes the layout breaking.