I need to hide a <label> when on a small mobile view.
Here's the html:
<label class="page_createpassword_label" for="page_createpassword">
<span class="page_label_main">Span Text</span>
<span class="page-hide">. </span>
<span class="page-label-hint">
<strong>Information text</strong>
<span class="page-hide">. </span>
<span>More Span text</span>
</span>
</label>
The label is currently hidden using :before and :after selectors but as I'm trying to make it work for Android 2.3 so I can't use these.
The current CSS to hide the <label> is as follows:
.page-label-hint:before,
.page-rtl .page-label-hint:after {
display: none;
}
And
.page-label-hint:before {
left: -21px;
}
Is there any way to hide the label using another method and avoiding the :before and :after selectors? I was perhaps thinking along the lines of display: none.
Thanks
#media all and (max-width: 450px) {
.page_createpassword_label {
display:none;
}
}
You can now hide the label in the mobile view. ;) Might need to adjust the media query to suit your needs. You can read about media queries here: http://css-tricks.com/css-media-queries/
Enjoy
Related
In my code, I have a 2 lined text. I want to move the second text (nth-child(3): 10 x apples) to the line below when the width of the screen changes. I have tried display:block and white-space:pre. But it didn't work and the sentence did not move to next line. My code and a screenshot is below. What should I do to achieve this?
#media (min-width: breakpoint-max(sm)) {
.fruit-detail {
& :nth-child(3) {
display: block;
}
}
}
<div class="fruit-detail">
<span class="day-one ng-star-inserted">
"Yesterday"
</span>
<span class="ng-star-inserted">
Today
</span>
<span> 10 x </span>
<span>Apples</span>
</div>
You could wrap "10 x Apples" around a parent container and give it:
.parentContainer::after{
content: "\a";
white-space: pre;
}
Don't know if it works tho, though I don't have sass installed.
This is just a suggestion because it worked for me :).
You can toggle the visibility for a break tag by providing a class to it and setting display:none; to it in your main css and display: block in your matching media query.
Refer to this for a practical example : https://codepen.io/darshiljani/pen/QWxdqpz
You are selecting the third .fruit-detail.
I don't think you can use display:block here because "10x" and "Apples" won't be side by side.
You can select the second span and add a line break with :after (or the third with :before)
.fruit-detail:nth-child(3) {
background-color: orange;
}
.fruit-detail span:nth-child(2):after {
content: "\a";
white-space: pre;
}
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Apples</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Strawberries</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Bananas</span>
</div>
I'm trying to hide parents pseudo element ::before hide on input focus and it shouldn't work on button focus. Currently it looks like this
.parent::before{
content: 'default';
}
.parent:focus-within::before{
display: none;
}
<div class="parent">
<input type="text">
<button>awd</button>
</div>
and it doesn't seem to work. I don't want to involve any js/jquery. Would be great if there any vanila css or atleast scss solution.
Thanks in advance!
You can't do that with parent focus to control pseudo element, cause button and input both trigger focus on parent, you can't approve one and disapprove another. Instead, you can wrap input to do that.
label::before{
content: 'default';
}
label:focus-within::before{
display: none;
}
<div class="parent">
<label>
<input type="text">
</label>
<button>awd</button>
</div>
Firstimer here. Sorry if myquestion is too stupid.
How can I change the label in :
<span class="fluid-thumbnail-grid-image-type">
XYZ
</span>
I want change XYZ to something else in a hosted application.
I have access only to add custom CSS to the head section.
Thanks in advance
Fernando
CSS/HTML Solution:
If you are able to edit the html, and want to use only CSS, you may use the :before (or :after) selector:
.fluid-thumbnail-grid-image-type:before{
content:"ZYX"
}
<span class="fluid-thumbnail-grid-image-type"></span>
Javascript Solution: If you are able to add javascript I would recommend jQuery .html() like so:
$('.fluid-thumbnail-grid-image-type').html('ZYX');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fluid-thumbnail-grid-image-type">XYZ</span>
Using only CSS Here's what you can do >>>DEMO Using CSS Pseudo-element :after and content
.fluid-thumbnail-grid-image-type {
visibility: hidden;
}
.fluid-thumbnail-grid-image-type:after {
content: 'ABC';
visibility: visible;
display: block;
}
<span class="fluid-thumbnail-grid-image-type">
XYZ
</span>
I need to display ex: $300.00, but I need the dollar sign to be displayed smaller than the number so its going to look like a trademark, but not that small.
Is there a CSS function that does that?
Thank you in advance.
Could be something like this?
HTML:
<span class="dollar">300.00</span>
CSS:
.dollar:before {
content: '$';
font-size: somethingSmaller;
}
See this fiddle and let me know if this helps.
But only if not empty!
.currency:not(:empty):before {
top: 0;
content: "$";
}
<span class="currency">10.5</span><br />
<span class="currency"></span><br />
<span class="currency">42</span><br />
Use a <span> element to style in-line text:
HTML:
<span class="currency">$</span>
<span class="price">300</span>
CSS:
.currency{
font-size:.5em;
vertical-align:text-top; /* resembling more the tm symbol you mentioned */
}
A fiddle for convenience...
The difference from lante's answer is that this will work in much older browsers as well. For more info, see the support for :before and :after pseudo elements.
Use the :before pseudo selector
.amount:before {
content: "$";
font-size:.9em;
}
A very simple way to do this would be :
HTML :
<div class="text">
<span class="dollar">$</span>300
</div>
CSS :
.text {
font-size: 18px;
}
.dollar {
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/
However, if you understand pseudo-selectors well, you would be better off using this:
HTML:
<div class="text">300</div>
CSS:
.text {
font-size: 18px;
}
.dollar:before {
content:'$';
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/1/
Hope this helps!!
If you really must do this, use
<small>$</small>300.00
and, if desired, set the size of small in CSS, e.g.
small { font-size: 75% }
A link to the fiddle is at the bottom.
Is there a way to bulge a text node by applying transform styles to it's parent container?
HTML
<span class='manual-labor-1'>e</span>
<span class='manual-labor-2'>s</span>
<span class='manual-labor-3'>c</span>
<span class='manual-labor-4'>h</span>
<span class='manual-labor-5'>e</span>
<span class='manual-labor-6'>w</span>
<br/><br/><br/>
<span class='just-css-3'>eschew</span>
CSS
.just-css-3 {
/* ultimate troll wonders if there is a way to do create the same effect using just css3 (tansform?) */
}
/* begin this is all garbage */
color:red;
display:inline-block;
transform:rotate(-180deg);
-ms-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
/* end this is all garbage */
}
.manual-labor-1{ font-size:20px; }
.manual-labor-2{ font-size:50px; }
.manual-labor-3{ font-size:90px; }
.manual-labor-4{ font-size:90px; }
.manual-labor-5{ font-size:50px; }
.manual-labor-6{ font-size:20px; }
http://jsfiddle.net/uyCZj/3/
Unfortunately, not yet, it seems. Not until we get the ::nth-letter() pseudo-selector.
A Call for ::nth-everything
CSS :nth-letter()
In the meantime, you can try using Lettering.js, a jQuery plugin for typography.