My application built with Google App Engine has this page that displays search results.
In my laptop the design and font size look fine (I use Chrome); but in the bigger display on a desktop with IE, the title looks huge and the text under the title is grayed out (it shouldn’t be). Below is the css that I am using. I appreciate your help regarding the design and any problems you see with it. Thanks.
css for the body (text under the title):
body { font-size: small; font-family: Verdana, Helvetica, sans-serif; }
css for the title:
#large {color: #0066CC; font-size: large; }
css for “comment”
#small {color: #808080; font-size: x-small; }
EDIT
In IE I also noticed that the text under the title is grayed out. What is the reason for that? This is the code:
self.response.out.write("""<p>
<span id=large>%s</span>
<span id="small">comments</span><br />
%s
</p>
""" %
(item.url, item.title, main_id,
item.pitch))
Try using percentages or pixel values instead of keywords for the font-size. Different browsers interpret those keywords differently, which is why you're seeing the discrepancy.
Not that this is the direct cause of the problem, but the first thing I notice is that you're using IDs instead of classes for styling multiple elements.
So this:
<span id="small">
should be:
<span class="small">
And your #small selector should be .small. Likewise goes for large.
Zach Rattner should have identified the real problem though.
Related
I have a problem with certain CSS applied to my website. I use some CSS to set the color, size and alignment of text. It works fine on the desktop browser, everything looks how it is supposed to be. The problem happens only when I load the page on my android chrome. At certain times it shows the CSS properly, but after I refresh it, the text becomes much smaller. Yet, some other text on the page that uses the exact same CSS does not change at all.
Note that the following CSS property is only applied to a mobile phone screen size. I use the CSS Media Queries to do so.
Here's the CSS I am applying:
.list {
color: white;
padding: none;
display: block;
margin-left: 0px;
margin-right: 10px;
text-align: left;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
}
It also happens with some other CSS on the page. It keeps on changing upon refreshing the page.
Added information:
This is what it is suppose to look like.
This is how it looks like most of the time.
Both list uses the exact same CSS properties.
Please do provide me with some help. Thank you.
The main reason is that you are using % try rem. You may need to do mobile queries for font sizes on other screen types.
font-size: 100%;
change to:
font-size: 1.8rem;
This could be too big
Because you're using a percentage for font size, it's based on the size of the parent container. A better approach is to use rem or px. Here's a nice article explaining all of your options
I am attempting to build a page that offers RSS feeds, just title and dates of articles. This is a snapshot of what I have so far.
.wp-block-rss__item {font-size: 12px; color: #000000}
.wp-block-rss__item-publish-date {font-size: 12px; color: #000000}
Now, the second line of code, tells me I got something right. The font size and color both change the date to what I want. But the first line, only the font-size is working, I can change the article title (rss item) font size, but the color remains.
I am also trying to hide the bullet point image that flows from the RSS feed.
I tried
.wp-block-rss_item::marker {display: none;}
For what it's worth, this is my first attempt at this type of CSS manipulation, I'm using the Chrome developer tools / inspector to help identify what needs changing. Prior, I had a web page that used a paid theme, and would just post "how do I do this?" and someone would reply with code within a day or two. I'd like to learn to do these simple things myself. Happy to clarify anything or post other details from the Chrome tool.
Adding this in response to comments - my inspector view looks like this. (yes, a different rss feed from posted above, same issue for all the feeds)
Try using !important behind your statements to override already given properties.
For example:
.wp-block-rss__item {font-size: 12px; color: #000000 !important}
writing this to make it easier for people to find the solution that i wrote in the comments.
To fix this the easiest way is to change the .wp-block-rss__item {font-size: 12px; color: #000000} rule into
.wp-block-rss__item a {
font-size: 12px;
color: #000000
}
Why does this happen? To make it easy, you are dealing with CSS specificity, which is what makes CSS so flexible (while also making it difficult for people to approach it). So, to get on your point, every HTML element has it's "basic" styling, in the case of an a like yours it's blue colored and underlined like it was showing in the first screenshot, but why was your code changing the font-size but not the color? Simply because the "basic" styling of the a doesn't have a font-size, but it has a color and that color was overriding your rule, this is because for CSS the rules that were applied to the a are more specific than the rules applied to .wp-block-rss__item which was the parent of the parent of your a. Changing the rule like i suggested you tells the browser that every anchor inside a .wp-block-rss__item has to get that styling, which, in this case is more specific than the "basic" styling. I'll give you an example, maybe it's easier to understand
.parent{
color: red;
}
.parent .green{
color: green;
}
.kid a{
text-decoration: none;
color: black;
}
.kid .custom-link{
color: white;
background-color: red;
padding: 5px;
}
<div class="parent">
<span> This text is red </span> <br>
<span class="green">This text is green</span> <br>
This is a normal link <br>
<div class="kid">
This is a custom styled link <br> <br>
This is another custom styled link with a more specific selector
</div>
</div>
Notice how the normal link doesn't get the color of the .parent (red) BUT when i use a more specific class .kid a both links in the kid element get the style without the underline and the color black. The second link has a more specific class so it gets the color from that.
You can read Here and over here for more info. I know this might look scary and hard to understand, but trust me, work with CSS for a month or so and it will become natural.
Hope I explained myself good enough, let me know if you don't understand something
On a webpage I am making, the CSS-containing HTML for a headline is as follows:
<div class="headline">
<span style="color: #00f">◼ </span>This is a headline
</div>
The ◼ is for the Unicode character ◼, the Black Medium Square. This is showing up fine on Firefox, IE, and Opera, but on Chrome it's showing as a hollow square, the "don't know this character" symbol. I'm running all the browsers on Win7Pro.
What is the simplest way to accommodate Chrome and get it to show this symbol? I've tried using ∎, ∎, which is close, but it's a rectangle that isn't a square and therefore won't suffice.
I'm using the Arial font at the moment. If I need to use another font just for this character and just for Chrome that would be fine but how? Or if the closest that's possible is ∎, and I therefore have to put up with Chrome users getting a rectangle that isn't quite a square (which some may feel serves them right for using such a browser), what's the simplest way to target Chrome to achieve that?
It's a pretty simple symbol you need - why not render the square with HTML and CSS?
.square {
display: inline-block;
width: 10px;
height: 10px;
background-color: black;
}
<span class="square"></span>
Per this SO answer, you just have to pick a range of fonts that should have the character. I used his example and it worked on Windows 7:
.force-square {
font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;
display: inline-block;
}
.imitate-square {
width: 7pt;
height: 7pt;
background: #000;
display: inline-block;
}
<div>
◸◹◺◻◼◽◾◿☀
</div>
<div style="font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;">
◸◹◺◻◼◽◾◿☀
</div>
<div>Imitated: <div class="imitate-square"></div></div>
<div> Forced: <div class="force-square">◼</div></div>
You might want to try the Hex version:
'◼'
I can't seem to make it appear properly, so go here: http://www.fileformat.info/info/unicode/char/25FC/index.htm
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
I'm working on a responsive site. After viewing it on a device running iOS5, I notice that all my h2 tags seem to display twice, one on top of the other. I checked it on a device with iOS6 and it looks better, but not on the iOS5. However, when I change my h2 tags to spans (changing them to display: inline-block) it seems to work fine as well.
I'm not doing anything seemingly out of the ordinary with my HTML or CSS, and I'm also not using a z-index anywhere in the document so would anyone have an idea what is happening?
<h2>Hello</h2>
h2 {
display: block;
font-family: "Segoe UI Light";
font-size: 36px;
color: #C41230;
}
Seems your problem could be a font weight rendering bug. It might be inheriting bold styling. See this SO post. You could try setting your font weight to normal for h1, h2, etc.