CODEWITHSUNDEEP
css
Parlanchina
Parlanchina

Reputation: 157

CSS responsive box

I created a responsive box for my site (http://www.to-hawaii.com/trees) and it works fine except one thing. See here http://www.to-hawaii.com/page.jpg on the left and right side of the title there is a gap and I cant figure out how to fix. I figured the problem comes from line style.css 525

.images_tabbox {
    max-width: 495px;
    width: 100%;
    float: left;
    background: transparent url("/theme/images/images_tab_box_mid.jpg") repeat-y scroll center top / 100% 100%;
}

When I remove float:left; this particlar issue is fixed but then the whole box looks like this http://www.to-hawaii.com/page2.jpg

I would appreciate it if someone has any ideas how to fix this. thanks!

Upvotes: 0

Views: 47

Answers (1)

partypete25
partypete25

Reputation: 4413

It's because your image(s) have a solid white background. The white on the left and right is part of the actual jpg. To fix it you have to save your image again from the source (hopefully you have access to the source design files) with a transparent background as a png or gif format. jpgs can't have transparent backgrounds.

Upvotes: 1

Related Questions