I have a wordpress blog and by default there is basically double spacing between every line, leaving a white space, on the text widget. This has something with the theme, and after spending some time going through the coding I was unable to find it (I'm extremely new to coding and have been teaching myself...
Anyways, even using html codes to try and reduce the space have not really helped. Here is an image of the text widget that I'm talking about:
Image
And also, here's a link to my site tradingliberation.com. You can see the widget on the right side of the screen, with the label "Key Data Calendar."
Again, please keep in mind I know pretty much nothing when it comes to coding. Sorry for the ignorance and thanks for your help in advance!
Looking at the code, it seems that the result of your vertical spacing is line-height CSS property :
(line 755 in style.css)
#sidebar ul {
line-height: 24px;
...
To set line-height for just this small part of your sidebar, you can wrap the content in a div tag, to which you apply a desired line-height.
However, you shouldn't define line-height in pixels. Percentage value or EMs would be a better idea. In this case, you'd just change it to line-height: 150%;
To troubleshot this kind of problems you should use some kind of Web Developer tool. For Firefox, there's a native one, or Firebug extension. For Google Chrome and IE it's the built-in Code Inspector. You can switch them on by pressing F12 in the browser window.
Related
I am trying to emulate an "Instagram" style menu for a website for its mobile version. Everything is fine but the problem is that I have a little scrolling issue with the x and y axis in which there are a few pixels more than intended.
I would like to make it 100% fixed so no scrolling is triggered.
I would paste the code but as I am working with a commercial Wordpress theme I find it over-complicated.
The website url is:
https://www.galaventura.com
Thank you very much
Actualization:
I provide two screenshots to support my question. In the first one there is the current state of the navbar. In the second one, the result I seek. Don't pay attention to the unaligned icons. A third image is provided to synthesize my exposure and might make the issue clearer.
The texts in the anchor links (INICIO, NOSOTROS, etc.) breaks the layout. So set font-size to something small, for example 10px:
.ast-header-break-point .main-navigation li {
width: 100%;
font-size: 10px;
}
Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space
I downloaded a pre-made layout for a simple website. However, the original scale is quite small which makes it hard to read the text on the site. That is why I want to use the css zoom argument to enlarge the page :
body {margin:0px; padding:0px; background-image:url(images/background.jpg); background-repeat:repeat; zoom:140%}
This seems to work but this also causes the content of the page to no longer be centered.
(example of the problem: http://217.199.187.69/testaccountarne.be/ )
Can anyone help me to fix this?
Thanks,
Arne
P.S. As you probably already noticed, i'm a CSS novice.
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
First of all, let me say that I am not a professional coder - I've done every change on my site bit by bit and I'm not sure I really get how I made some things work.
That said, I had posted what seemed to me two simple questions (for people who actually know what they are doing on the Wordpress forums and received nothing but a smart#ss remark that I needed to learn CSS. Anyway....
ONE I have changed the overall fonts on the site but I can't seem to get the body of a post - and it alone to change to a better font for reading. I have set up League Gothic as my main header, sidebar, homepage fonts but I need to change the font in the body of the post itself to something a little easier on the eyes. And every combination I try changes ALL the fonts or doesn't work at all. ANY good advice?
TWO I have image/text just below the banner on my site. There are two small icons on each side of the "navigation bar" I want all to be horizontally/vertically aligned but the two icons on each side appear just a little above the first line of text - and this shoves the bottom row of text onto the background image.
CAn anyone please tell me what I'm missing?
The site is thirdrailers.com
Thank you so very much...
(ALSO, There are other additions I will be making down the road - if anyone can refer a coder/designer I would be very grateful.)
1) You want to change the font for: #post-content p and also .recent-postwrap p, .main-postwrap p. This will change the interior pages and the home page, respectively. You can add: font-family: Arial or whatever fonts you'd like to use.
2) Quick fix, though not the best. On the images, add style that says for the left image: float: left; margin: 15px -20px 0 20px; -- adjust those numbers accordingly. On the right image, just change it to float: right; margin: 15px 20px 0 -20px;.
Hope that works for you.