Wordpress, Zenon lite

HTML & CSS
1

I just started building a website and since I’m new to all this, I’m using wordpress. As a theme I chose Zenon lite, a theme with a slider and underneath it are 4 boxes. I would really like my homepage to be ‘scrollfree’, the problem now is that there’s still about 1 cm left to scroll down. Since the text I’m using in the blocks is really short, I would like to make the blocks smaller. Is there any way to make the blocks about 1-2 cm shorter? And where should I be looking to change it? Sorry if its all a bit abstract, but like I mentioned, I’m new to all of this.

Thanks!

2

Hi and welcome to SitePoint.

Are you using the default implementation as shown here: http://zenonlite.towfiqi.com/ ?

If so you can alter the height of the box by editing the file style.css.
On line 90 there is the declaration:

.midrow_blocks


.midrow_blocks{ width:970px; height:190px; padding: 0 15px; background:#fff; border:1px solid #ececec; float:left; margin-top:50px;  position:relative;}

You can change the height to whatever you need here.

3

Thank you so much for the quick reply! Have been looking for some time now, just couldn’t find it myself.

4

No problem, if you use Chrome then it has some built in developer tools that you can use.
If you right click on the element you want to look at and go to ‘Inspect Element’ it gives you a load of useful information that you can play about with.

5

Sorry to bother you again, but I’m having another problem. I finally were able, thanks to your help, to change the size of the blocks, but now I don’t know how to make the ‘extra’ room disappear. At the place where formerly the boxes were, is now some open space. This meaning there is stil room to scroll on the homepage. Perhaps you could help me again?

Thanks!

6

Have a look around the midrow_ definitions and see which ones alter the height.
Some of them have height:xxxpx defined which sets it to a specific height, others are reliant on the content to give them height.

Tweak some of them and see what happens.

7

If that doesn’t help, feel free to post a link to your site so we can take a look.

8

I’ve tried nearly al the values, couldn’t find it unfortunately. You can find the link here, if you could help that would be great!.

Thanks!

9

Around line 97 in your style sheet, you have this:

.mid_block_content {
border-right: 1px solid rgb(236, 236, 236);
[COLOR="#FF0000"]height: 185px;[/COLOR]
margin-top: -35px;
padding: 25px 10px 0;
}

Just remove or edit that height.

However, beware of setting heights on content at all, especially elements that contain text. It can easily makes your pages break, such as when people increase text sizes.

I would suggest you remove all these heights:

.midrow_blocks {
width: 970px;
[COLOR="#FF0000"]height: 100px;[/COLOR]
padding: 0 15px;
background: white;
border: 1px solid rgb(236, 236, 236);
float: left;
margin-top: 50px;
position: relative;
}

.midrow_block {
float: left;
width: 220px;
[COLOR="#FF0000"]height: 175px;[/COLOR]
padding-top: 15px;
overflow: hidden;
}

.mid_block_content {
border-right: 1px solid rgb(236, 236, 236);
[COLOR="#FF0000"]height: 185px;[/COLOR]
margin-top: -35px;
padding: 25px 10px 0;
}

Then I’d remove the right border from each midrow_block_content and instead put it on midrow_block:

.midrow_block {
width: 220px;
padding-top: 15px;
overflow: hidden;
[COLOR="#0000CD"]display: table-cell;[/COLOR]
[COLOR="#FF0000"]border-right: 1px solid rgb(236, 236, 236);[/COLOR]
}

I’d also remove float left from the above and instead use display: table-cell (in blue).

Then, add display: table to midrow_blocks_wrap:

.midrow_blocks_wrap {
width: 970px;
[COLOR="#FF0000"]display: table;[/COLOR]
}

and remove the float: left from there.

That will make the layout work a lot better. :slight_smile:

10

That looks way better indeed, thanks you. Only problem now is that the colors has changed?

11

Never mind, found the problem. Thanks so much for all the help!

12

Just one last question, a forum told me to add this the stylesheet to make the letters bigger: body #topmenu ul li a{font-size:18px!important;}
Problem now is that some of the letters are smaller than others, is that just the style or is a wrong edit?

13

Make sure to place display: table on .midrow_blocks_wrap rather than display: table-cell.

What colors have changed? It looks the same to me. You haven’t added in the right borders to .midrow_block. Is that what you mean?

14

No the colors were different but found out what I did wrong, so changed it back.
Just 2 last questions, a forum told me to add this the stylesheet to make the letters bigger: body #topmenu ul li a{font-size:18px!important;}
Problem now is that some of the letters are smaller than others, is that just the style or is a wrong edit?

15

They all look the same to me. Could you post a screen shot of what you are seeing?

16

Haven’t been able to get it scrollfree aswell, is it even usefull to keep trying?

17

Here’s what is looks like on a proper computer (Mac):

Maybe it’s just a quirk of how the font displays on a PC.

Not sure what you mean, but you should let content scroll if it doesn’t fit in the browser window.

18

The person I’m helping with this site is hammering on and on about him wanting a homepage without the possibility to scroll down, he wants the entire homepage to be seen without the need to scroll.

19

He’s an e-jit. As web designers, we have to educate clients. What does he want people to see on a mobile phone? A title and nothing else?

If you use

body {overflow:hidden;}

any content that is not visible on the screen won’t be accessible.

20

I agree with Ralph, it is practically impossible as screen sizes differ so much.
I have a 27" Mac with a 22" LG attached to it but I also have a 15" screen attached to my laptop which I use for browsing!

Then as Ralph says, you have to factor in mobile devices and tablets!
Its all good fun…!