I have a set of small images which is working fine in Firefox but not in Google Chrome. The html code is this:
<li class="links">
<img src="<?php bloginfo('template_directory'); ?>/images/taxNero.jpg">
<img src="<?php bloginfo('template_directory'); ?>/images/eco.jpg">
<img src="<?php bloginfo('template_directory'); ?>/images/pet.jpg">
<img src="<?php bloginfo('template_directory'); ?>/images/diverability.jpg">
</li>
And the css styles:
#nav-bar li.links a {
display: block;
float: left;
margin: 0 1px;
width: 40px;
}
Here's the link to the webpage to see it: http://www.alcappellorosso.it
You should see the images right below the left navigation menu.
Add in your CSS:
#nav-bar li {
height: 35px;
}
Or value more situable for your design.
Related
I need to change an html image under 500 px resolution.
I have three images as you can see in the code snippet, but under 500 px resolution I need only one image.
I made the media query, all the css code I have there. I've tried to put the image for mobile in a different container which is set the
display: none
at beginning. And when I'm in the media query
#media all and (max-width: 500px){..}
I set it the
display : inline
But it just won't work. It displays nothing.
I've tried to set for the
#experiential_2_img{
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
but it just displays the image that is set for desktop, too.
Can you advise how can I resolve this?
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}
.experiental-container-mobile { display: inline;}
/*#experiential_2_img {
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
}*/
<div class="home_thirdrow">
<div class="experiental-header">
<h3>Experiential</h3>
</div>
<div class="experiental-container">
<img id="experiential_1_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-amanda_phillies.jpg"
alt="Amanda_Phillies">
</div>
<div class="experiental-container">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-philadelphia_zoo.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container-mobile" style="display: none; ">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container">
<img id="experiential_3_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="insurance_fraud">
</div>
</div>
On these days it's always better to develope your site with mobile-stylesheet and extending this for desktop.
Reason:
Desktop-View on Moble :puke:
Mobile-View on Desktop :ok:
#media screen and (min-width: 768px) {
#experiential_1_img {
display: inline;
}
#experiential_3_img{
display: inline;
}
#experiential_2_img {
display: inline;
}
.experiental-container-mobile { display: none;}
}
.experiental-container-mobile { display: inline;}
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}
I do not know how you have the race of the files, but it has looked that this is correct the link of your css file to the project.
It is possible that in the path of background-image it is necessary to go back in the previous folder and then enter in images.
Example:
background: url ('../ images / experiential-insurance_fraud.jpg'); . The two points to move back a directory.
I am trying to add social media buttons to my WordPress page via HTML code:
However, they styling does not work, they take up the entire page and are much too big. Why does this happen, and can I fix it?
Here is the code:
<style type="text/css">
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
</style>
<div id="share-buttons">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/facebook.png" width="35" height="35" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/twitter.png" alt="Twitter" />
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/google.png" alt="Google" />
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/linkedin.png" alt="LinkedIn" />
</a>
<!-- Pinterest -->
<a>
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/pinterest.png" alt="Pinterest" />
</a>
<!-- Email -->
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/email.png" alt="Email" />
</a>
</div>
When a style is being overwritten by another style, the best fix is to use a stronger selector:
#share-buttons a img { /* added 'a' */
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
For a more in-depth explanation of CSS specificity, read this CSS Tricks article.
instead, define a specific size for the 'a' tags and set the images to be 100% width.
#share-buttons a { width:35px, display:inline-block}
#share-buttons a img {width: 100%}
also, remove the width parameter in the 'a' tags
Add this,
#share-buttons {
width: 100%;
height:auto;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
#share-buttons > a{
text-decoration:none;
}
#share-buttons > a > img{
width:35px;
height:35px;
}
#share-buttons img {
max-width: 100%;
height: auto;
}
#share-buttons a {
width: 35px !important;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline-block;
}
I am a student and learning WordPress. I started with the Underscore_s starter theme. For a website I want to centre align the custom header but I am unable to do so. I created a class in CSS named "Headimg" and assigned the class to img in Header.PHP. Which I don't think is the correct way to do it, is it?
Header.PHP
<img class="headimg" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="TCET R&D" >
CSS-
.headimg{
padding-top: 40px;
display: block;
margin-left: auto;
margin-right: auto;}
Try changing your class to this:
.headimg{
padding-top: 40px;
display: block;
margin: 0 auto;
}
I have some <img> tag which will be load some images via the php code.
The following code :
<div class="images_cd">
<img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image10'); ?>" alt="" />
</div>
I would like to add 50 px padding-bottom for each img tag, but for the last one i don't one that padding.
Here is my CSS :
.images_cd{
}
.images_cd img{
margin-bottom: 50px;
}
.images_cd img:last-of-type{
margin-bottom: 0px;
}
But the last img still get the 50px padding as well as 0 padding.
And the thing is the -50 px is also not working for that.
What is the problem?
I copied your code as written, but added some outlines so you could see things and it's working just fine.
.images_cd{
width:400px;
border:1px solid blue;
}
.images_cd img{
margin-bottom: 50px;
width:100px;
height:100px;
border:1px solid red;
}
.images_cd img:last-of-type{
margin-bottom: 0px;
}
You can see it here and verify that there's no margin-bottom on the last img.
My guess is that something else must be overriding that CSS rule.
use
.images_cd img:last-child { }
instead
I have an image that is using absolute positioning on my site. It is positioned to appear over a css-background-image. It works fine in gecko based browsers and webkit. I was surprised to see the same problem in BOTH versions of IE including 8. I am currently using a png for the image but tried it with a jpg and that made no difference. Relevant markup and css below....Any ideas ?
<div id="have_vid">
<div id="click_here">
<a href="/services"<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img></a>
</div>
</div>
#have_vid {
width: 328px;
height: 152px;
background-image: url(images/havevid.jpg);
background-repeat: no-repeat;
float: right;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 14px;
border-bottom:1px dotted #616161;
}
#click_here{
position: absolute;
top: 50px;
right: 24px;
}
Your 'A' element is wrong. Try
<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png" />
Also use fiddler to watch and see that IE is downloading the image correctly.
You're missing a closing angle on your <a> tag:
<a href="/services"<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img></a>
Should be:
<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img>