how do i make a box size dynamic

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Tony Groome 261 posts 804 karma points

Feb 04, 2015 @ 15:24

0

How do I make a box size dynamic

Hi All

I am trying to make a box dynamic, it is colouring behind some user inputed data, the widths will be the same but the heights will be different and that is the problem. I have tried height:100% in my Stylesheet but it displays all wrong. It will only display any way almost correctly if I give it a fixed heigth like height:120px; Is there a way around this.

Thanks.

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 04, 2015 @ 15:40

1

Hi Tony

How is it displaying "wrong"? I mean if the height is not fixed it should just figure out the height automatically. Perhaps a screendump is needed to illustrate the issue.

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

Feb 04, 2015 @ 15:53

0

Hi Jan

Here's the dump:

I'm looking to get the Read More button on the bottom with no white visible below. The picture heights are all different and so each section should have a different height.

The picture with the Parking sign is almost right, but Cafe Pages has too much white below the Read More. The white background has a fixed height in the Stylesheet:

.home-page-box {

background:#fff;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

position:relative;

font-size:inherit;

font-weight:inherit;

color:#444444;

padding:5px 0px 10px 0px;

margin-bottom:8px;

-webkit-box-shadow: 0px 0px 6px 0px rgba(62, 100, 181, 0.2);

-moz-box-shadow: 0px 0px 6px 0px rgba(62, 100, 181, 0.2);

box-shadow: 0px 0px 6px 0px rgba(62, 100, 181, 0.2);

width:220px;;

height:125px;

}

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Feb 04, 2015 @ 16:01
100
Hi Tony,

You should be able to position the read more button by adding this to your CSS,
```
.home-page-box {
    position:relative;
}
```
And for the read more button then add.
```
.read-more {
    position:absolute;
    bottom: 0px;
}
```
You need to extend your current CSS for these elements with this code. Remember to correct the CSS class name for the read more button.

Hope this helps,

/Dennis
Copy Link
Tony Groome 261 posts 804 karma points

Feb 04, 2015 @ 16:06

0

Hi Dennis

Sorted!! WOO! HOO!! Thanks! I won't tell you how long I have been at this..... :)

Tony

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?