Problem! Problem!! Problem!!!

[dareadel]

I feel like I am going mad trying to find a solution but the support for this themes are just not encouraging. Here is my page: http://water-filter-tips-blog.com/multipure/.

Title font TOO BIG and can't find any solution to reduce the font. No help from the stylesheet file.  I changed the fonts from the following file but no luck: body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea {
color: #333;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
line-height: 1.6;
margin: 0;
padding: 0;
text-decoration: none;
}

blockquote,
input,
select,
textarea,
.author-box,
.breadcrumb,
.sticky,
.taxonomy-description {
background-color: #f5f5f5;
border: 1px solid #ddd;
}

input,
label,
select,
textarea {
color: #333;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}

li,
ol,
ul {
margin: 0;
padding: 0;
}

ol li {
list-style-type: decimal;
}

/* Hyperlinks
------------------------------------------------------------ */

a,
a:visited {
color: #ed702b;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a img {
border: none;
}

/* Body
------------------------------------------------------------ */

body {
background: url(images/bg.png);
}

::-moz-selection {
background-color: #ed702b;
color: #fff;
}

::selection {
background-color: #ed702b;
color: #fff;
}

/* Wrap
------------------------------------------------------------ */

.wrap {
margin: 0 auto;
width: 960px;
}

.mindstream-landing .wrap {
width: 800px;
}

/* Header
------------------------------------------------------------ */

#header {
background: url(images/gradient.png) top repeat-x;
margin: 0 auto;
min-height: 85px;
overflow: hidden;
text-transform: uppercase;
width: 100%;
}

#title-area {
float: left;
overflow: hidden;
padding: 30px 0 0;
width: 300px;
}

#title {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.25;
margin: 0;
text-transform: uppercase;
}

#title a,
#title a:hover {
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px #000;
}

#description {
display: none;
}

#header .widget-area {
float: right;
padding: 25px 0 0 0;
width: 650px;
}
The whole page is too wide even though my table width is only 550px but not sure why it overflows or it's because of the annoying oversize heading. I have read almost every response to a similar complaint but there just lukewarm responses or it seems some is replying in "tweets."
Please can someone give me a detailed direction on how to reduce these fonts. Please a mere "go to" another page will not help. I have been to almost all before I come here.

Thank you!

[JestersTear]

To reduce the body font: reducing this one (I've bolded the relevant selector and have the font size in red) should do the trick.

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea {
color: #333;
font-family: ‘Open Sans’, sans-serif;
font-size: 15px;
line-height: 1.6;
margin: 0;
padding: 0;
text-decoration: none;
}

 

To reduce the post's title change:

h1, h2, h2 a, h2 a:visited {
    font-size: 48px;
}

Neither of these will help with your table problem, though, because your Order Now images are too big.

---

Monica | jesterstear on twitter | monicaguerraleiria.com

[dareadel]

Wow! Experience is better. It all works. A big thank you for restoring my sanity.

[JestersTear]

🙂 You're very welcome, glad I could help!

---

Monica | jesterstear on twitter | monicaguerraleiria.com

[Author]

Posts