How can I reduce the width of the boxed area?

[Red]

Hi There,

I’m designing a website for someone and he wants “more of the background” showing. As it is now, it looks like the site is “magnified” — as if, when the site is viewed, you clicked “Cntrl +” to make it larger in the browser window.

I’ve used Flexform for another site, and this is not the case.

How can I reduce the width of the boxed area so more of the background image shows?

Thanks!

Red

[Tekguild]

Can we get a link to the site to see exactly what you mean? Or post a screenshot?

[Red]

Hi,

Thanks for your response.

To see what it’s like, just open a browser window and and then click “Ctrl/+” and then “Ctrl/ -”

The Ctrl + will magnify the site to what seems like it’s too large, like 110% or more. That’s what my site looks like.

Not sure it has anything to do with Flexform, but am unable to find an answer…? the site looks obviously wide to me and the person I’m designing the website for.

Red

[Cosmin – SUPPORT]

Hi Red,

I will need to see your site to understand where this is coming from (you can post it in a private reply).

If this was not the case for the other site, what did you do different? Any custom CSS added, perhaps?

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[Red]

Hi,

Thanks for your help.

Here’s a link to the site: http://kitsummers.com/about-kit/

And here is all the custom code:

#header-shadow{
display:none;
}
.single-portfolio .media-wrap{
margin-top:0px;
}
.inner-page-wrap{
margin-top:0px;
}
article.type-portfolio .body-text{
margin-top:0px;
}
.alt-bg{
margin-top:0px;
}
.full-width-text{
padding-top:0px;
}

.no-arrow:after { /* Clear Full Width Text Arrow */
display: none!important;
}

.no-rev-spacing .media-wrap { display: none; }

#header-shadow{
display:none;
}
.single-portfolio .media-wrap{
margin-top:0px;
}
.inner-page-wrap{
margin-top:0px;
}
article.type-portfolio .body-text{
margin-top:0px;
}
.alt-bg{
margin-top:0px;
}
.full-width-text{
padding-top:0px;
}

.wpb_showcase_widget {
margin-bottom: 40px;
overflow: inherit !important;
}

#header-shadow{
display:none;
}
.single-portfolio .media-wrap{
margin-top:10px;
}
.inner-page-wrap{
margin-top:10px;
}
article.type-portfolio .body-text{
margin-top:10px;
}
.alt-bg{
margin-top:10px;
}
.full-width-text{
padding-top:10px;
}

nav a {font-size:20px !important;}

/* Full width menu code */
#nav-section {
width: 100%!important;
}
.nav-wrap {
float: none!important;
}
#main-navigation {
float: none;
width: 100%;
height: 48px;
text-align: center;
}
nav .menu li {
float: none;
}

/* Disable the nav search */
#nav-search {
display: none;
}

#header-section #logo{
margin:0px;
width:100%;
}
#logo img{
margin:0px auto;
}

Thanks again,

Red

[Red]

I just want to add that the site has that “too wide” look in Firefox, IE10, Opera and Safari, but it looks perfect in Chrome.

[Tekguild]

I just tested in FF for Mac (latest version) and IE9 on Windows and I’m not seeing the problem. Is it possible that it’s a local issue, such as if the browsers displaying it large have some kind of magnification enabled?

[Red]

Other websites appear to be their normal size, I think…I’ll have to look into a possible magnification issue.

Thanks, Grokism.

[Cosmin – SUPPORT]

Hmm, your boxed layout displays as it should – 1230px wide on a 1920px wide monitor; and there’s nothing wrong I can see in your custom CSS. Do look into any local browser related issues and let us know.

Regards,

————————————————————————————————————

Cosmin
Support Assistant