enter image description hereI need to remove a picture (using css) if a device visits that is a mobile user. I’ve tried media queries with the display:none and many other things And nothing. Maybe I’m just not using proper syntax or putting it in the right spot? Some help would be greatly appreciated. Thanks!
In the example you've posted, the stylesheet is targeting the class:
.post .sc_image img
but your code example only shows an image tag without the parent containers that have the .post .sc_image classes.
You'd expect to see the image inside some divs (etc) like this:
<div class="post">
<div class="sc_image">
<img />
</div>
</div>
For your example to work correctly, remove .post .sc_image out of your css.
However, I'd guess that these other classes are because your complete code has more to it than just the tag sitting by itself. With that in mind, I would assume that some other style within your application is overwriting the display:none property.
Related
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
I am by no means a coder but I know I need to fix an image source bug in my individual tumblr post CSS. I must have a shoddily coded theme that makes me have to manually put in the image source code for each photo in photo sets. But when I click on the HTML on an image post, I can't actually edit the CSS but just the html. Can you even do that?
I figured it out!
Before:
{block:PermalinkPage}{PhotoURL-500}{/block:PermalinkPage}
After:
{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}
I'm not clear why you can't edit your css. But if that's the case you can try styling your images by using style within your < img > tag.
<img src="your-img-path" style="height:100px; width:100px;" />
Working with Bootstrap I wanted to make a replica of http://spring.io/projects; a grid of links that are each a bordered panel (might not be the right word...) with some words an a picture inside. I've come to a conclusion, that Bootstrap's Thumbnail component should be right for me.
Having tried to use it, however, I ran into a problem.
If I want the entire panel to be clickable, I have to apply the thumbnail class to an anchor tag (wrapping the anchor into a div with thumbnail doesn't seem to work). Then, inside the anchor tag I've got a div tag with the class caption in it to store some text whose styling I don't want to change upon hovering on the panel.
What this caused is this: the text regained normal colour (as compared to the link colour when used without the caption class, however hovering over the panel causes the text to get underlined, and I'd prefer if that was not the case: it doesn't look very good and the highlight of the border upon hover is already a good indicator of that it is indeed a link.
I was about to just get my css hat out and modify the caption class to not do this, but it doesn't seem like the right course of action; I can't imagine it being desirable behavior for captions to get highlighted like this, and I'd like to use as little custom code as possible (since sticking to standards means I won't have to maintain this code every time I update bootstrap).
So my question is: where am I going wrong? Is it actually bad practice to want the entire thumbnail panel to work as a link? Or should I go ahead and manually scrape the underlining off? Or am I maybe applying wrong classes to wrong tags? Or is the thumbnail component not a right component for me to use altogether in such a case?
EDIT:
Forgot to include the code.
The thing I'm currently using:
<a class="thumbnail text-center" href="#">
<div class="caption">
<h3>Potato</h3>
<p>Some short description of what this exact potato really is about.</p>
</div>
</a>
EDIT 2:
Adding an image of what is currently occurring:
This is with the mouse hovering over it; as you can see, the text is underlined, which is not ideal.
Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.
If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)
Make your Div position: Relative;
create a link
put span tags into that link <span></span>
Style the empty span tag with
CSS:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.
Hope this can help.
EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)
Add a tiny bit more CSS to your solution and you are sorted...
a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}
Here is an updated fiddle
The solution is to add on the top of your style sheet:
a:hover {
text-decoration: none;
}
I'm using prettyphoto for the first time, very nice tool. I would like to know if more people have this problem. Its not crucial but I hate to not do things because I dont understand them. This is the code:
<div class="single_left">
<img src="_img/examples/thumb-1_50.jpg" alt="WHATEVER INFO" />
</div>
It works perfectly. But I have a doubt. If you look all the code you will see that its quite simpel. Its a div in which inside there is a <a> and inside there is a <img> thats acts as a thumbnail. As any for any <img> you need to add an alt="" atribute. The idea of this atribute is that if somebody has slow internet or if the image fails to load, a small description would be displayed in a text format, this will be the content of alt="". In this case "WHATEVER INFO" (Check code above). So if the image is displayed this alternative text shoud NOT be displayed.
ok... clear
The issue is that with prettyphoto if the picture is zoomed from a click you can see the alt="" text on top of the frame of prettyphoto. So in this case WHATEVER INFO would be displayed. This is not its purpose and of course breaks any design plan.
Does anybody know why this happens??
Is there a way of solving this so I can put some alternative text??
According to this link, add this CSS code to css/custom.css to do what you want:
div.ppt, .pp_description {
display: none !important;
}
I can let you know that the answer to my question os exactly like this:
div.ppt {
display: none !important;
}
This will make the alt value not displayed.
What I don;t know is if the picture is not loaded if the alt will work as such... At least you know how to take it out.
Greetings!!
I'd like to define the appearance of my images inside the section (I'm trying to add a border to the image - but I can't reference the image directly because the images are added dynamically - as content of blog posts.)
Can you advise me on how to do that?
Do I have to create a new section/id/div? How can I than say to the machine: In the section/id/div I created I would like you to apply these styls to the images."
?
thanks, D.
Yes you need to get a reference to the image or the block in which the images is going to be displayed. Then apply the css rules to the image or block you will then get the styles on the image. I would prefer class="" if there are many and id="" if there is only one.
If you have img inside any elements like below,
<div class="someclass">
<img src="" />
</div>
then at CSS,
.someclass{
your rules go here.
}
or if you want to directly have styles on image then you HTMl will be like below and CSS same as above.
<img class="someclass" src="" />
If content is added dynamically, styles are applied automatically as new content is added to the DOM, you don't need to worry about that. Inject the content you want, and as long as there is CSS-rules that match that content, the browser will handle the rest.
Update
I realize that I might have misunderstood your question at first. If the user is completely in control of the markup of the blog post, I guess the best way would be to use a selector, that select every image within a container that wrap each blog post.
Lets say each blog post is rendered within an element with class post. Then you could do something like this:
.post img {
border: 1px solid #000;
}