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;
}
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
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;
}
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
I currently have a simple form with a text input that has a blue background set by css. It all works perfectly and looks good in firefox and ie but not on an iPhone or safari? How can I arrange it so that there is an image behind the input rather than a background?
Please note, there are other images either end of the input, see - http://stack.uk.to
The only issue I see is that the CSS for your input says its height should be 48px. Your images that sit next to it are 50px in height. If you change the input's height to 50px it seems to match.
style.css:
.loginInput {
margin-right: -11px;
background: #0099FF;
padding: 0;
color: #000066;
font-size: 36px;
font-family: 'Cubano', Arial, sans-serif;
vertical-align: bottom;
height: 50px;
border: none;
}
My aim is have the text inside this div displaying in the middle of it's container cross-browser.
If I could achieve this it would enable me to use fewer images.
http://jsfiddle.net/tMFaD/
Notice how this example looks different in Chrome/Safari and Firefox. The issue seems obviously related to the type/line-height/similar (the '1' is higher up on firefox).
Can this be easily done?
UPDATE: This is the small difference that i'm trying to solve: http://cl.ly/2A2o371c2O2r3q0T0R2E
UPDATE 2: I have not found a definitive cross-browser solution but some of the answers in this thread should come close enough for most. The solution I used was to use a browser-targeted rule for this element. I could also have used images/sprites.
You could set line-height to match the height of the box and then remove the top and bottom padding. That will align it in the (vertical) middle of the box.
You can do it in a couple of ways:
.box {
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 80px;
height: 80px;
}
.box {
width: 80px;
height: 80px;
font-size: 44px;
line-height: 80px;
font-weight: bold;
color: white;
background: pink;
text-align: center;
}
Both will produce the same results:
http://jsfiddle.net/spacebeers/s9Urm/8/
EDIT: To get the level or cross browser/cross OS precision you're after I think you're going to have to use separate style rules for some of them or just use images.
OTHER suggestion, use line-height to control vertical middle instead of padding:
.box {
display:block;
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
float: left;
line-height:80px;
width:80px;
height:80px;
}