I've got a rollover menu hard-coded into WordPress (couldn't get IE to recognize the links otherwise). It works fine but there is this mysterious padding on all the links. I've tried all sorts of stuff - css reset, various positioning settings, adding and removing padding, changing ems to px, removing line height... Here's the site: http://circore.com/sporttours/
I assume this is the pertinent css, but it could be coming from elsewhere in the style.css file. Any help is appreciated! thanks
#menu-top {
background:url(images/menu-top.png);
height: 115px;
width:210px;
margin-bottom:0px;
}
#logo {
display:none;
}
#menu-content {
width:210px;
padding:0px;
height:238px;
}
#menu-content .img {
padding:0px;
margin:0px;
}
#menu-bottom {
background:url(images/menu-bottom.png) no-repeat;
height: 302px;
}
You can fix it by changing this:
#menu-content .img
{
padding:0px;
margin:0px;
}
to this:
#menu-content img
{
vertical-align: top;
}
I changed .img to just img. The difference is important. .img is looking for <img class="img" /> (or any element with class="img"). You're after finding all img elements, so img is what you want.
I can't see the need for margin: 0; padding: 0 - I assume that was merely part of your attempt to get rid of the extra space.
Related
At first I noticed the font sizes are large on the site and uncomfortable inside each article
I tried customizing the CSS file
To write a code that makes fonts smaller
for paragraphs and sub-headings
H2، H3
I tried some articles and found that the fonts have really changed and become smaller
But the problem is not all the fonts in some articles, the problem remains the fonts are in large sizes and have not changed
What is the cause of the problem and how can I set all the fonts in all articles smaller than the original size
See the picture that shows you a check mark
This has the fonts changed successfully, while the other picture has the font not changed
Then see also the code and a picture of where the code was modified
body {
font-size: 16px !important;
line-height: 35px !important;
}
.default_logo,.logo-sticky,.logo-mobile{
height: 110px !important;
}
.fullwidth-wrapper {
padding: 15px 30px;
}
#media only screen and (max-width: 1200px){
.wgl-theme-header .wgl-mobile-header {
display: block;
height: 120px;
}
.default_logo, .logo-sticky, .logo-mobile {
margin-top: 10px;
}
h2 {
font-size:24px !important;
}
h3 {
font-size:20px !important;
}
h4 {
font-size:18px !important;
}
}
Can't change the size of all fonts in wp
I started making a new WordPress theme with Bootstrap when I stumbled across a problem.
I found out that when I create a new post with some text and an image at the top(Aligned to left) then the image is actually not aligned.
The image is in the top left corner and the text is underneath it.
I searched on Google and read blog posts and so on.
Most people suggest adding some styling in style.css that would align the text.
Example:
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
Of course, this aproach didn't work for me so I checked and I think that the problem is because these classes work only if applied to image tag.
When accessing the_content() function, the image is printed inside a div tag.
<div id="attachment_66" style="width: 310px" class="wp-caption alignleft">
<img class="size-medium wp-image-66" src="path/to/img" alt="Sphere" width="300" height="169" sizes="(max-width: 300px) 100vw, 300px">
<p class="wp-caption-text">Who doesn’t like spheres?</p>
</div>
If the problem really is because of those tags, how can I get alignment classes to be applied to img not div tags?
This is how it looks.
Thanks to #Andrei Gheorghiu I managed to solve the issue and I am gonna answer my question.
Premade WordPress themes have some css that I haven't included.
So, this is what you need to include in you style.css
.alignleft { float:left;}
.alignright { float:right;}
.aligncenter { display: block; margin: auto; }
Instead of creating the following style:
img.alignleft { float: left; margin: 0 1em 1em 0; }
Why don't you create it like:
div.alignleft img { float: left; margin: 0 1em 1em 0; }
I have a very weird problem and I just can't seem to be able to find a fix.
When I load a post on my site, it's supposed to show a main image, and any other uploaded images below it. The main image loads/shows fine, but all other images related to that post load but don't show on the page.
The container for the images loads too, so you I can see that there's an empty space where the images should have loaded. If I "inspect Element" I can clearly see that the image exists, and hovering over the line marks the container. I can also see that the image has loaded successfully (200). If I make any live CSS changes via the "Inspect Element", the images pop up and shows fine.
I have a feeling it's a CSS issue, but nothing I've tried seems to work. Any help is greatly appreciated.
PHP:
<?php
$arr = AuctionTheme_get_post_images(get_the_ID(), 4);
if($arr)
{
echo '<ul class="image-gallery">';
foreach($arr as $image)
{
echo '<li>'.wp_get_attachment_image( $image, array(130, 96) ).'</li>';
}
echo '</ul>';
}
?>
CSS:
.image-gallery {
list-style-type: none;
overflow: hidden;
margin: 10px 0 0;
padding: 0;
text-indent: 0
}
.image-gallery li {
float: left;
display: block;
margin-right: 5px;
margin-left: 0;
min-height: 106px;
min-width: 145px
}
.attachment-130x96 {
max-width: 130px;
max-height: 130px;
width: auto;
height: auto;
margin: 0;
display:block;
}
Screen Shots:
This is how the post shows when the page loads
The images shows after the slightest CSS change
I'm trying to make square images from rectangular in css. They also need to be centered.
I've read a lot of questions here, but the answers, good as they might be, always use constant sizes in pixels whereas I need tem to be in percents so the theme can remain responsive.
Basically I need to change this:
into this:
but if the screen is even smaller:
The main problem here is I cannot predict the screen size. It is designed for mobile, so they can vary.
I was thinking about doing css in php (it's for wordpress so it's possible). I was thinking something like width:50% and use the width as a variable, but if I set the height to be equal to width, it will be 50% as well. Is there a way to, I don't know, convert the width to pixels or something? I'm out of ideas, please help.
The problem is, that it is just not possible to change the height relative to the width. So your problem is not the image itself (using overflow: hidden or background-size: cover will do that) but having the square size of your container with dynamic width and then the same height.
A very strange way would be to use a square image (_blank.png with 1px x 1px) and add width: 100% so the height will be the same.
with css:
div{width: 30%;}
img{width: 100%;}
and then add your actual picture as background-image with
background-size: cover;
background-position: center;
Neither performant nor beautiful, but it works.
have you tried this
img { width: 80%; }
make sure there is no height for img in your css file. Also make sure not to set something like height="500px" width="500px" in your html/php file.
also to be centered just do
img { margin: auto; }
Nice picture ;)
If you have an image you want centred—but covers—a parent element, using CSS only, then you’ll need two wrappers:
This works only for wide images. Portrait images will just centre themselves within the container.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.inner-wrapper {
position: relative;
display: inline-block;
right: -50%;
}
.inner-wrapper img {
display: inline-block;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="inner-wrapper">
<img src="//placehold.it/400x200" alt="" />
</div>
</div>
</body>
</html>
Just use img{max-width:100% !important; margin:0 auto !important;} and I think it will help you.
Try following css for your image. It won't break the pixels/dimensions for the image.
.imageClass img {
width: 50%;
height: auto;
}
.imageClass img {
width: auto;
height: 50%;
}
<img src="image_path" alt="" class="imageClass" />
I've having trouble understanding whats going wrong in the css on this page.
On the left sidebar there a h3 element called testimonials with a 3px green border underneath it.
http://goo.gl/L7Lio
For some reason the border goes right up to the text in the next column next to it.
However on this page which use's exactly the same css it doesn't have that problem everything is aligned in the left sidebar correctly.
http://goo.gl/oL3km
Your CSS class of the content is floatright posts and its width is 500px. The rule is set here:
.single-page-testimonial .posts {
width: 500px;
}
The CSS class of the content of the correct page is post floatright sidebar-exist (with the additional sidebar-exist class) and its width is 490px. The rule is here:
.single-page-no .post.sidebar-exist {
width: 490px;
}
So your main content is wider than the correct one 10px. I think you may miss the class sidebar-exist somewhere.
The content DIV has 490px vs 500px (here it is the space of 10px)
.post h1, .mid-title {
border-bottom: 3px solid #004732;
color: #004732;
font-size: 18px;
line-height: 30px;
margin: 10px 0;
padding: 0;
} this css style is overwriting your h3 style,dude to which your facing that problem.
Solution:
just replace margin: 10px 0; with margin: 10px;. this will solve the problem, i`ve checked in firebug :)
Happy coding :)