I have this button which contains Upgrade my account.
I'd like to have a rule that says for screens less than 990px, it should be Upgrade instead (as Upgrade my account is too long)...
Can I cleanly achieve that in CSS (not by adding both version and having one display: none while the other one is displayed ...) ?
I tried
#media(max-width: 990px) {
.navbar-btn {
content: 'Upgrade'
}
}
but it won't work...
Thanks
Use a span and show/hide it according to the screen size:
HTML
<button class='navbar-btn'>
Upgrade<span> my Account</span>
</button>
CSS:
#media(max-width: 990px) {
.navbar-btn span {
display:none;
}
}
JSFiddle
Say your html is in the following
<div class="navbar">
<span>Upgrade my account</span>
</div>
Your media query can be
#media(max-width: 990px) {
.navbar:before {
content: 'Upgrade'
}
.navbar > span {display:none;}
}
Example
See
Fiddle
The content property only applies to the :before and :after psuedo elements, it also means you'll be putting content (the text) in your CSS..which I wouldnt tend to recommend..
HTML
<div class='navbar-btn'></div>
CSS
.navbar-btn {
position:relative;
}
.navbar-btn:after {
position:absolute;
left:0;
content:'Upgrade my Account';
}
#media(max-width: 990px) {
.navbar-btn:after {
content:'Upgrade';
}
}
I would suggest something along the way i did in this demo
CSS:
#media(min-width: 990px) {
.navbar-btn:after {
content: ' account'
}
}
HTML:
<button class='navbar-btn'>Upgrade</button>
Related
In my html, there are header, sidebar, footer, and <main>. They are convenient when reading on browser, but when reader print the page, I want them to print only the <main> part because sidebar... etc are not necessary when printed on papers.
Can i select the visible parts when printed?
Here is what I have used to print only the desired content.
<head>
<style type="text/css">
#printable { display: none; }
#media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Side Bar Content
</div>
<div id="printable">
Main Content
</div>
</body>
sure, you use a media query.
using a media query in your css
#media print {
… css goes here
}
You could also use a seperate print.css file
here is an article that goes into greater details
Try window.print for printing:
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
Then use css to style the items for printing:
#media print
{
header{
display: none;
}
}
I've been trying to have different images show up on my main page based on screen size. None of the solutions I've seen online are helping. Instead, both images are showing on all screens. Here is one of the methods I've tried. First, in my stylesheet, I put:
.screen-only {
display: block;
}
.mobile-only {
display: none;
}
#media screen and (max-width: 480px) {
.screen-only {
display: none;
}
.mobile-only {
display: block;
}
}
Then, in my main page, I have:
<div id="titleBar" class="screen-only">
<img src="assets/images/screenpic.png" class="screen-only" />
</div>
<div id="titleBar" class="mobile-only">
<img src="assets/images/mobilepic.png" class="screen-only" />
</div>
I'm confused if I should be putting the class in the div or in the image section, but either way I put it, or if I put it twice like I did in the example here, both images show up on all sizes.
you code seems correct except that your second "div" does not have the same class in the "div" and "img" tags. Your "img" tag should have a class of "mobile-only" not "screen-only"
One possible source of error and confusion is you are using screen-only and mobile-only as a class names. Maybe it is allowed but it is confusing and not hard to avoid.
Another possible error is that you have marked both images with the class screen-only.
The following is I think a bit clearer and should actually work:
in css
div.responsive {
background-image: url("assets/images/screenpic.png");
}
#media only screen and (max-width: 480px) {
div.responsive {
background-image: url("assets/images/mobilepic.png");
}
}
in html
<div id="title-bar" class="responsive"> </div>
here is a complete html file with inline styles that show what you are after. I have used images from SO just to show that it works, you should replaace the img tags with your images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.responsive {
background-color: lightgreen;
}
#mobile-title {
display: none;
}
#desktop-title {
display: block;
}
#media only screen and (max-width: 480px) {
div.responsive {
background-color: lightblue;
}
#mobile-title {
display: block;
}
#desktop-title {
display: none;
}
}
</style>
</head>
<body>
<div id="mobile-title" class="responsive">
<img src="https://i.stack.imgur.com/9LROA.png?s=32&g=1" width="32" height="32">
</div>
<div id="desktop-title" class="responsive">
<img src="https://www.gravatar.com/avatar/598b1b70f462d6708ff9a459a102d500?s=32&d=identicon&r=PG&f=1" alt="" width="32" height="32">
</div>
</body>
</html>
I have the following SASS structure
.entry {
//some styles here
.banner {
border:4px solid red;
.position {
display: inline-block;
}
}
}
And in html
<div class="entry">
<div class="banner>
<div class="position"></div>
</div>
</div>
Now I want to change the style of .banner and .position when an extra class is added to the entry.
<div class="entry team1">
<div class="banner>
<div class="position"></div>
</div>
</div>
This is a problem I have encountered lots of times and have never found a clean way to do it, the & operator or the #extend could be options but ideally I would like to group all the styles which have the same class.
Any suggestion on how I could write this pattern as efficiently as possible would be appreciated?
Well I would suggest something like that:
.entry {
.banner { /* defaults */ }
&.team1 {
.banner {
/* changes */
.position { /*changes */}
}
}
}
As far as I know, it is not possible to »traverse up the tree« in css, so it wont in scss either.
Another thing that comes to my mind is the #at-root what moves the rule to the root of the generated css. But all in all this will result in a »global« class definition, so I guess that is not what you want.
This is what I've got:
{LikeButton size="15" color="white"} {ReblogButton size="15" color="white"}
Can anyone please help me make them be in the same line?
You can do it a couple of ways:
.reblog_button, .like_button {
display: block;
float: left;
}
Or:
.reblog_button, .like_button {
display: inline-block !important; /* important needed due to inline styling */
}
Here's what I did:
<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>
And then in the CSS I put
#buttons {
float:right;
}
I know this is a classical one but I find no answer on the net:
I have this html code:
<div class="comment>
<div class="myLinks">Some Links</div>
<div class="comment">
<div class="myLinks">Some Links</div>
</div>
</div>
Then I have this css (written in scss):
.myLinks {
display: hidden;
}
.comment {
&:hover {
.myLinks {
display: visible;
}
}
}
When the pointer goes above the first comment block, the nested one's hover effect is also activated. What I want is my links to be visible only in the comment being hovered, not in his parents or children.
How can I do this? Thanks!
.myLinks{
display:none;
}
.comment:hover > .myLinks {
display: block;
}
Used to this css
.myLinks{
display:none;
}
.comment:hover .myLinks{
display:block;
}
Demo
or
-------
.myLinks{
visibility:hidden;
}
.comment:hover .myLinks{
visibility: visible;
}
Demo2