Hi Devin

I have done a lot of tweaking, so it is possible. Here is my CSS, I couldn’t see anything:

.logo img{

width: 290px;

height: 80px;

position: relative;

top: 5px;

}

.social_header .phone-info {

color: #014073;

font-size: 1.5em;

}

.main_menu ul:first-child>li>a {

font-size: 15px;

}

#top .main_menu .menu li ul a{

line-height:23px;

padding:8px 15px;

font-size: 14px;

min-height: 23px;

}

.title_container .main-title {

font-size: 18px;

position: relative;

min-height: 36px;

font-weight: 600;

}

#menu-item-search {

display: none;

}

.main_menu {

right: -20px;

}

#header_main .container, .main_menu ul:first-child > li > a {

height: 120px !important;

line-height: 120px !important;

}

h2.post-title {

color: #014073;

}

#top .template-blog h1.post-title, #top .template-blog h1.post-title a {

color: #014073;

}

#wp-calendar {

width: 99%

}

#footer .widgettitle {

color: #ffffff;

font-size: 20px;

}

@media only screen and (max-width: 767px) {

.responsive #header .social_bookmarks {

margin-bottom: 10px;

}

}

.news-excerpt p {

text-align: justify;

}

h2{

text-transform: none !important;

font-size: 24px;

letter-spacing:0px !important;

}

.widgettitle {

text-transform:capitalize;

letter-spacing:0px !important;

font-size: 16px;

}

.main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child > li.current_page_item > a {font-weight: 800;}

.main_color .sidebar .current_page_item>a {color:#000000; font-weight:bold;}

.current_page_item>a {font-weight:400;}

.buttonClientArea {

display: inline-block !important;

text-align: center;

vertical-align: middle;

padding: 5px 10px;

border: 1px solid #013662 !important;

border-radius: 8px;

background: #014073 !important;

background: -webkit-gradient(linear, left top, left bottom, from(#0266b8), to(#013662)) !important;

background: -moz-linear-gradient(top, #0266b8, #013662)!important;

background: linear-gradient(to bottom, #0266b8, #013662)!important;

text-shadow: #01203a 1px 1px 1px!important;

font: normal normal bold 11px arial!important;

color: #ffffff;

text-decoration: none;

}

.buttonClientArea:hover,

.buttonClientArea:focus {

border: 1px solid #014073!important;

background: #0d88ed!important;

background: -webkit-gradient(linear, left top, left bottom, from(#027add), to(#014176))!important;

background: -moz-linear-gradient(top, #027add, #014176)!important;

background: linear-gradient(to bottom, #027add, #014176)!important;

color: #ffffff;

text-decoration: none;

}

.buttonClientArea:active {

background: #0d88ed !important;

background: -webkit-gradient(linear, left top, left bottom, from(#013662), to(#013662))!important;

background: -moz-linear-gradient(top, #013662, #013662)!important;

background: linear-gradient(to bottom, #013662, #013662)!important;

}

.sidebar li a {

color: #4C4646 !important;

}

@media screen and (max-width: 767px) {

#top .social_bookmarks { display: none; }

.header_color .container_wrap_meta { padding-top: 10px; }

.login_buttons {

position: absolute;

top: 50%;

left: 40%;

}

}

@media only screen and (max-width: 1339px) and (min-width: 768px) {

.responsive .main_menu ul:first-child > li > a {

padding: 0 6px;

font-size: 14px;

}

}

.avia-icon-list .iconlist_icon {

background-color: #014073 !important;

}

.responsive .mobile_menu_tablet .main_menu { display: block; }

Regards,

Rob

I guess actually I’d like to act as it does on the iphone screen when the ipad is portrait but then switch to the normal website design if the ipad is in portrait. Is this possible?

Regards,

Rob

Hi Josue

That worked. Thank you.

Regards,

Rob

Hi Nick,

Ok, thanks. I have removed the !important part on the CSS which has made the pages without a sidebar go back to their correct size. The problem is that now the sidebar and main content now don’t match up. Here’s an example:

http://bit.ly/1ajABZ4

I’m sorry but I’m a bit confused with the media queries. I want the main page content to be that width on monitors and then relative to that on device sizes where it still shows the sidebar. Maybe I have been going wrong from the start and there is a better approach. All I am trying to do is make the sidebar thinner and the main content space wider?

Thanks,

Rob

Hi

Sorry, maybe I wasn’t clear. I meant that although the page itself is full width the content itself isn’t. On the contact page you can see that the map and contact details aren’t spread all the way across the page. You can also tell by the line in the special heading as this stops inline with the beginning of “client area” (in the menu), where as if I remove the code it stops inline with the end of “contact”. Can you see what I mean?

Regards,

Rob

Ok, Ive found that:

.widgettitle {

text-transform:capitalize;

}

Works to stop the titles from being all uppercase. Is there an easy way of changing these to ‘special headings’ with a HR next to the text?

I’ve decided against changing them to H4 and will just try to make them look the same as my H4 ‘special headings’ instead.

Hi Nick,

I have tried to play around with the CSS but I still can’t get it to use the full width on pages without a sidebar?

Thanks,

Rob

Great, work perfectly.

Thanks,

Rob

Hi Ismael

Thank you for the code.

1) This works fine, so thank you very much for that.

2) I was wanting to move the menu icon rather that the logo, sorry if that wasn’t clear. I want to move the menu icon up so that it is next to the social icons and phone number.

3) That doesn’t really solve the issue as the title still goes off the page, and it also changes the font size of shorter h3 titles which fit onto the page fine. What I need it to do instead is that if the title is too long to fit on the page then it splits it into two, or even three, lines instead. Is this possible?

Regards,

Rob

Brilliant! That worked, thank you very much.