I'm currently trying to centre these two images in the centre of the spans they are in however no matter what I do its just not having it! Any help would be appreciated!
The company I'm now working for uses wordpress and I'm very new to it.
The image linked is the elements that I'm working on.
have you tried this?
img.your-class {
display: block;
margin-left: auto;
margin-right: auto }
<img class="your-class" src="..." alt="...">
Related
I work on small site, and have problem with FlexSlider position. I use the same template for 2 sites but with different language. Now when i copy the CSS from second site, it not apply the changes and gallery looks different on second site. To explain with image. Original Site :
New Site: (Login is user / password )
And this is link to affected page. (previous must be logged in)
I tryed to insert this CSS :
/* Gallery Center */
.col-lg-7 {width:100%;}
.flex-active-slide {
text-align: center;
}
But this just set in center of block , and not in center of page, as first site. Any help how to get at center like first linked site? Thanks
Try
/* Gallery Center */
.col-lg-7 {min-width:100%;}
.flex-active-slide {
text-align: center;
}
The browser may scale based on this or you can create a separate DIV the width of the page and then use margin: auto; for the contents and just place the slider inside it.
.centerslider {
min-width: 100%;
margin-left: auto;
margin-right: auto;
}
.slidercontents {
text-align: center;
}
<div class=centerslider>
<div class=slidercontents>
<h1>Place the slider here</h1>
</div>
</div>
I'm working on a small project, and have one little problem that I don't know how to resolve myself. I have an image gallery with many images, but I want the active image to be centered, without changing the resolution or width/height ratio. Link for the issue here. Login is user / password. I tried to manipulate with this CSS:
.img {
margin-left: 200px;
}
However, it seems to ruin the bottom slider. What should I do to center the main image without changing the image ratio? This example image shows what I want to do.
Try this
.imgs {
margin-left: auto;
margin-right auto;
}
or you could do this
<div class="imgs" align="center">
<img src="https://source.unsplash.com/random/200x200" />
</div>
Try adding:
.flex-active-slide {
text-align: center;
}
I have the following problem with my wordpress site. In my blog section, where a list of all blogposts is shown, my featured images are of bad quality because of the responsive images option Wordpress implements. This is what my code looks like:
<div class="post-thumb"><a href="http://www.example.com/mypost">
<img width="300" height="75" src="http://www.example.com/wp-content/uploads/2017/02/img-300x75.jpeg" class="alignleft wp-post-image" alt="" srcset="http://www.example.com/wp-content/uploads/2017/02/img-300x75.jpeg 300w, http://www.example.com/wp-content/uploads/2017/02/img-768x192.jpeg 768w, http://www.example.com/wp-content/uploads/2017/02/img-1024x256.jpeg 1024w, http://www.example.com/wp-content/uploads/2017/02/img.jpeg 1400w" sizes="(max-width: 300px) 100vw, 300px">
</a></div>
If I change the 'sizes' element in my console and the maximum width to a much higher number than 300px (e.g. 3000px), my image shows in the quality it is supposed to be. But now my site, which is full width, only scales an image of 300px. I currently do not know where to change this element in my theme.
Thanks in advance,
Tom
Hello try display images in full size in your theme:
<?php the_post_thumbnail('full'); ?>
My template always displays images in full resolution.
Or you can try change post thubnail size from Admin Panel and refresh images with plugin again (i dont remember plugin name now).
Style (or min-width: 100%; max-width: 100%;):
<style type="text/css">
.post-thumb img{
padding: 5px; float: left; width: 100%; height: auto; overflow: hidden; box-sizing: border-box;
}
</style>
Everytime I add a Gallery in a post, I need to modify the html from
[gallery type="rectangular" link="none" ids="1743,1742,1741"]
to
<div style="margin: 0 auto; width: 500px;">
[gallery type="rectangular" link="none" ids="1743,1742,1741"]
</div>
I want to modify the php file to have this extra html added. Is this possible to do? I have limited knowledge on php and am struggling to find where this gallery tag is generated.
The gallery gets generated in a <div> with class="gallery" and some variable classes, depending on the gallery settings. See wp-includes/media.php#L1046.
So, you can simply add the following style in your stylesheet (styles.css), or using a plugin like Simple Custom CSS.
.gallery {
margin: 0 auto;
width: 500px;
}
If your theme is responsive, I would suggest to also set the maximum width to 100% to make sure it fits smaller screens as well.
.gallery {
margin: 0 auto;
width: 500px;
max-width: 100%;
}
Do note that since you specifically add "rectangular" as type, you might want to use a different class than gallery to make sure the styles do not get applied to other galleries.
To verify which class can be used, you can inspect the gallery in your browser:
Hover over the gallery,
click on right mouse button and select 'inspect element'.
I hope that helps. GL!
I want to have a semi trasparent hover effect on my social icons but cant figure it out.
Here is my header.php:
<div align = "right"><img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
I see alot off people saying to edit css but i cant find this in my css
here is my website http://ideviceguys.com
You need a hook for your css code.
Give your div an id or class.
Try adding class="socialIcons to your main div.
<div class="socialIcons">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
Then add this little nugget to your css.
.socialIcons a:hover {
opacity:0.7; filter:alpha(opacity=40); /* Damn MS and IE8 and earlier */
}
That should give your icons 30% transparency.
Consider what the others say around here. They are much smarter than I am.
You have to define it in css. First give your menu an id or class so your css can target it in a non-generic way.
<div class="nav">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
in css:
.nav{
float:right;
}
.nav a{
display:block;
float:left;
margin-right:10px;
}
.nav a:hover{
box-shadow: 0px 0px 10px #ff6600;
}
Obviously this is just an example. I have no idea what your actual design calls for. I am merely showing you that a parent element with a class of nav can select the a tags within and assign an effect on hover. This is trivial, intro level css. A more specific response will require a more detailed question.