I used the css custom manager to change the min-height for my WordPress site. The site has way too much blank space at the bottom.
When I changed the min-height it is only applied to the home page.
How do I get it to change for the rest of the pages?
I was told that I would have to make a child theme in order to get the manager to apply it to all pages.
Doing so is not possible for me.Is there any other suggestions?
campwhiskers is the site (somehow the blog page is okay too?)
This is what I put into the manager to get the page to change:
#main .content, #main .last-content
{
min-height:auto;
padding-top:50px;
position:relative;
clear:both;
}
#main .last-content
{
min-height:auto!important;
}
If you mean "much blank space at the bottom", the copyright section then
In style.css, at line 122 - copyright {
margin-bottom: 70px;
modify margin-bottom:
to lower value like 10px;
Your height on the other pages is being controlled by this property, which is on line 117 of your CSS:
#main .content, #main .last-content {
min-height: 1700px;
padding-top: 50px;
position: relative;
clear: both;
}
There is another instance of this on line 59, which is where the confusion is.
Just delete this part of the CSS on line 177:
min-height: 1700px;
Here's a visual
Here is another screenshot. This one shows the css files your theme is using. You need to track down this file on your Bluehost server and delete the min-height part. I can't tell you how to find it though b/c I can't see your server. It's likely in the themes folder. If you paid for this theme, you can maybe get the author to guide you (or not). I think if you dig around, you'll find it though.
Related
I'm trying to figure out a way to make a page go full width (I'm using Drupal 7).
The page has an embedded form on it.
Previously there were two blocks, which when I removed I'd hoped the iframe would fill.
Current iframe
What I'm trying to achieve
How do I go about this? - Link
You should edit your theme's style.css file and remove the following lines (line 481):
#right {
display: block;
float: right;
width: 740px;
}
You still have an extra block in the left region (region-left-sidebar).
tldr: I want to create simple theme, based on 2 columns with just pictures, that fill the whole screen, like this - http://half-way.precrafted.com/
Hello.
I started learning html/css yesterday, because i want to create rather simple theme that would fit my needs.
However, it turned out to be harder than i thought, unfortunately.
I post only pictures, without any captions or tags. All i want is theme based on 2 grids, where whole screen is occupied with pictures (except header on top). This is the best, almost exact example of what i want - http://half-way.precrafted.com/
However, the issue is that tumblr allows photoset with maximum width of 700px. This may be overriden with javascript - and i found such scripts, but it uses fixed values, so it won't really fit to any screen - just mine.
Set the photosetrow class to:
<div class="photoset_row photoset_row_2">
The CSS for this:
width: 400px;
white-space: nowrap;
overflow: hidden;
margin-top: 10px;
.photoset .photoset_row .photoset_photo:first-child {
margin-left: 0 !important;
}
.photoset .photoset_row .photoset_photo {
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
I literally pulled that CSS from looking at the source code of that page you posted.
It seems the most important one is the photoset_row_2
I am going to have to link to an external website as I am having trouble reproducing this issue in JSFiddle.
For some reason accessing my page with an URL fragment corresponding to an ID that exists on the page appears to pull up certain areas of the document, the behaviour is not reproduced with a non-existant ID. There is no JavaScript on the page which could be causing this behaviour.
This behaviour is consistent in the following (so is unlikely to be a browser bug):
Google Chrome 31
Firefox 21
Internet explorer 8
Live view (accessed: 19/12/13) Issue resolved - see graphic below:
This is the page as it should look: http://sixplusfour.co.uk/encyclopedia/
This is the page with the named anchor: http://sixplusfour.co.uk/encyclopedia/#pagelist
The error is shown side by side in the following image:
Does anyone know what could be causing this behaviour?
My guess is that the :after pseudo-class of #pagelist is causing this. I have no clue why this is happening but the display doesn't seems to load properly.
This pseudo-class seems like a quick fix. You might want to delete this pseudo-class and fix the real problem. Try to add a overflow: hidden to your wrapper so its floated contents keeps in the flow:
.col-group {
margin-left: -1em;
margin-right: -1em;
zoom: 1;
overflow: hidden; /*new line*/
}
I can not test it on reload, but this should work.
Update
The real problem is probably because the the base-line is shifting based on its font. It contains a dot as content. Now this is still not clear why this happens when redirecting. However i suggest to you a empty content for this:
.col-group:after {
display: block;
visibility: hidden;
height: 0;
clear: both;
content: ""; /* removed dot */
}
This should work without modifieng too much.
If you set overflow: auto; on #container you start to see why the problem occurs. The contents of #container are actually taller than their container. When the URL fragment is in place, the browsers are scrolling within #container to reach it.
(I haven't yet figured out exactly why, but hopefully this will point you in the right direction.)
It is probably linked to a :focus or :hover selector.
I see this code in your style.css :
.pagenav li a:focus {
outline: #114d74 solid 1px;
outline-offset: -1px;
padding-left: 0.5em;
}
Couldn't this be a different value of padding or outline that makes things change?
I have a WordPress site in development that seems to have a CSS issue that I cannot find. I installed the plugin AJAX Event Calendar and dropped its shortcode [calendar] in the page editor. That works as intended, but there is something pushing the calendar down somewhere in the neighborhood of 400 plus pixels. I've checked all containing divs, and the calendar divs as well. I also see no errors in the console. I just can't seem to locate what's pushing it down.
The page in question can be seen here.
in your custom.css file fix this:
#aec-container {
position: relative;
float: none;
}
with this:
#aec-container {
position: relative;
float: left;
}
i tried and it works.
I'm trying to make it so when one div becomes smaller in height the other moves up with it.
Here's a fiddle.
So if I was to make #top (which has absolute positioning) have a height of 400px instead of 600px, how to I ensure the relatively-positioned div below it moves up to 420px from the top, from it's original position of 620px?
Basically, it's to respond to the browser. If the browser is made smaller, #top will scale, so the div below needs to move with it.
UPDATE
HTML:
<!DOCTYPE HTML>
<html lang="en-UK">
<head>
<link href="Stylesheet.css" rel ="stylesheet" type="text/css">
<title>Hello World</title>
</head>
<body>
<div id="top"></div>
<div id ="logo"></div>
<div class="container">A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work."[4] "Wiki" (pronounced [ˈwiti] or [ˈviti]) is a Hawaiian word meaning "fast" or "quick".[5]A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work</div>
</body>
</html>
CSS:
body{
background-color: red;
width: 100%;
}
div#top{
position: relative;
display: block;
width:100%;
height: 600px;
top:0;
left:0;
background-color: black;
border-bottom: 3px solid white;
margin-bottom: 20px;
}
div#logo{
position:absolute;
color: green;
left: 50%;
margin-top: 20px;
margin-bottom: 30px;
}
.container{
position: relative;
margin: 0 auto;
margin-top: 20px;
width: 920px;
}
Padding issue
Assuming you need to keep #top as position: absolute, there is no CSS-only way of doing this. Since #top is absolute, it is no longer part of the document flow, and #container can no longer relate to it. You can either
A. Use javascript to watch the window.resize event or whichever resizing event you're referring to, then perform math to change the top property for #container
or
B. Change #top to position: relative and remove the top CSS property from #container
or
C. Use percentage-based values for #top's height and #container's top property.