I'm working on this static webpage. It's built with VueJS/NuxtJS, with Buefy as the as the UI library and I'm completely new to these technologies.
My problem is whenever I open chrome dev tools, the certain elements of a page changes its style on their own. I'm thinking of media query has something to do with this, but I cannot find the culprit media query though. This is happening in several parts of my webpage, but for simplicity I'll take this one example.
So this section is color red
And here is the CSS for that:
.mar-awesome {
padding-top: 80px;
padding-bottom: 80px;
height: auto;
width: 100%;
text-align: center;
font-size: 1rem;
color: red;
}
Then if I inspect element or open chrome dev tools, on the smallest possible window, after a few seconds it turns to black color like this:
And I'm guessing it's now referring to this CSS code(root.scss), on the body part:
$primary-font-family: 'Open Sans', sans-serif;
$primary-font-color: #333 !default;
html {
line-height: 1.15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
scroll-behavior: smooth;
scroll-padding-top: 95px;
#media (max-width: 1024px) {
height: unset;
}
body {
font-family: $primary-font-family !important;
color: $primary-font-color;
padding-right: 0 !important;
height: 100%;
#media (max-width: 1024px) {
overflow-x: hidden;
}
main.page-content {
padding: 1.5rem 1rem 1.5rem 1rem;
}
#__nuxt,
#__layout,
.client-view {
height: 100%;
}
}
}
By the way here is the vue file:
<template lang="pug">
.mar-awesome
.content-width.content-height-padding
| Mar is awesome. He’s so amazing we wish we had a dozen of him.
br
| The problem is we don’t, and Mar will only work 90 hours a week.
</template>
Can anyone please give me an idea why is this happening?
I found the culprit. It has nothing to do with my CSS, it's a bug in chrome developer tools. I need to reset the devtool then it worked fine now.
Related
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;
}
if Chrome is look like this:
.text-center {
text-align: -webkit-center;
}
and firefox:
.text-center {
text-align: -moz-center;
}
how about in opera?
.text-center {
text-align: -o-center;
}
is not working.
UPDATE:
HTML:
.container
.text-center.label-margin
%h3
.bubble LEADERSHIP
CSS of my bubble class.
.bubble {
position: relative;
width: 170px;
height: 45px;
padding: 11px 0 0 0 !important;
background-color: #333333 !important;
font-style: normal !important;
font-family: 'Fira Sans', sans-serif;
font-size: 25px;
font-weight: 600;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}
it looks like in OPera
You do not need to prefix the text-align property. You can simply use:
text-align:center;
instead (which should work on all browsers).
Further Reading:
W3.org documentation on the text-align property.
Here's quite a nice CSS-Tricks article that you might find useful.
If we're talking about any property, caniuse... is one of the 'best' browser compatibility websites out there, with info on nearly all css properties.
Please also note: Border-radius does not require prefixing (and hasn't done for quite some time now), whilst using !important is considered bad practise, so I would personally advise to get out of the habit of using it.
Try like this: Demo
.center{
text-align-center;
}
No need to use specifically for all the browsers,as its almost accepted by all browser
I am having a very confusing problem. On this site, I have the header text lined up properly for all browsers except IE, where the text is raised up to the point where it leaves the header box. Even IE10 has this problem. Here is the code for my header:
header {
margin-bottom: 30px;
background: #272727;
border-radius: 5px;
padding-bottom: 3px; }
header .center {
width: 94%;
margin-left: 5.5%; }
header h1 {
font-family: "Bebas", "Verdana", sans-serif;
font-size: 1320%;
float: left;
width: 21%;
margin-top: -18px;
line-height: 102%;
letter-spacing: -15px;
color: #e85d00; }
header .motto {
font: 400% "Bebas", "Verdana", sans-serif;
float: left;
width: 78%;
line-height: 102%;
color: white; }
As far as I know, there's nothing in here that should give IE trouble, especially not IE10, which is supposed to be comparable to other modern browsers. Is there something I'm missing? Also, I have a font-face declaration for Bebas that works just fine, so that shouldn't be an issue.
I tested in IE8, IE9 and the text showed just fine. Why do you have header .center set to display:none in ie.css ? Is this what you mean it "leaves the header" ?
Have you tried using a CSS Reset sheet prior to referencing your bespoke CSS sheet? I tend to find that the IE browser defaults vary from version to version so by using a CSS Reset, it allows your CSS to work from the same foundations across all browsers.
http://meyerweb.com/eric/tools/css/reset/
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;
}
there is a difference in how firefox and chrome render the padding in css.
what appears correct in chrome is extra padded in firefox. is there a way to solve?
.button {
font-family: helvetica, arial;
font-size: 64px;
width: 70px;
height: 45px;
font-weight: bold;
padding: 0px;
padding-top: 25px;
background-color: #000;
color: #fff;
text-align: center;
float: right;
margin: 7px 10px 0 0;
}
If your .button is a button this might be a mozilla inner focus thing... try this?
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
Firefox and Chrome render padding exactly the same way. Your problem is elsewhere.
Are you using a reset CSS? If not, the default line-height declaration might be interfering with the rendering of your button.
For one, your height is way smaller than your font-size. Since you don't have overflow specified, your height will always be extended to at least font-size (or whatever your line-height specifies).
If your .button class is actually a <button> element, also apply superUntitled fix.
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.
See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/
The solution is to use padding instead of line-height.
u can set a different padding for firefox
.button {
padding:0;
}
#-moz-document url-prefix() {
.button {
padding:10px;
}
}
The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.
.footertext6{
float: left;
padding-top:10px;
width: 160px;
height:102px; */setting height here*/
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
border-top-right-radius: 50px;
}