Responsive header image

@Irbi: Please post in your site URL and let me know what exactly you want in small screens.

@Irbi: Yes the header image you have added is the background image and the slider image in inline image that is why there is difference. For best, you can add the header image for that image from “Appearance => Header”. Then add the following CSS in “Appearance => theme Options => Custom CSS” box.

#hgroup-wrap, #site-logo { padding: 0 }
#hgroup-wrap { position: relative; }
#hgroup.with-logo {
    left: 5%;
    padding: 0;
    position: absolute;
    top: 35%;
}

Then remove your the following Custom CSS that you have added in “Appearance => theme Options => Custom CSS” box.

#masthead { padding-bottom: 50px; }
h1#site-title { padding-top: 71px; }
h2#site-description { padding-bottom: 93px; }

Hello I cant delete already uploaded images in my header area. I have kept it on Random but it stays with the same undesirable image on the homepage and I have no option to delete it, even resetting it does not work. help?

wow , your a lifesaver thanks!!

@eatcho: From where you are changing you site URL. You cannot just change the site URL from “Settings => General”, you need to change that from your database as well. As all your files are referenced to your site URL. You can to use tool like this http://interconnectit.com/products/search-and-replace-for-wordpress-databases/

If you are talking about different thing then do let me know it.

@guy.shachar76: You most of the question will be solved if you check in the Theme Instruction of Catch Evolution Pro at http://catchthemes.com/theme-instructions/catch-evolution-pro/

1. How to remove the rotating pictures that comes with the theme (house & flower)
— The rotating pictures is called Featured Slider and you can check in theme instruction for more details.

2. How to decrease header height
— You can decrease the header height by reducing the Header Top Margin and Header Bottom Margin from “Appearance => Theme Options => Header Options”.

3. how to modify the comment backround (it’s gray)
— You can change the color code as per you need and then you can add the following CSS from “Appearance => Theme Options => Custom CSS” box.
#respond { background-color: #fff; }

4. How to change the menu and title to left to right.
I don’t get this. Menu and title is at left only. Post in your site URl and explain where you want to move your menu and title.

I forgot to add the url http://www.drmargrau.co.uk/

That is helpful, I would indeed like to keep the format the same both on computers and on mobile devices. One of the problems I am encountering when I disable the responsive design is that the left hand text widget gets moved below the content in the ‘page’. Am I able to fix this by changing the dimensions of my @mediascreen dimensions? They are as follows:

@media screen and (min-width: 900px) {
#primary { width: 626px; }
#secondary { width: 274px; }
}

@media screen and (min-width: 961px) {
.home #main { padding-top: 0px; }
.home .hentry { padding-bottom: 0px; }

Another odd glitch I have noticed is that there is a space between the header and the content of the page and text editor on a desktop version of firefox. Below is a link to the example. I do not have this formatting problem when using chrome or with firefox on laptops.

http://www.stakeholderforum.org/fileadmin/files/screenshot homepage margrau.jpg

Cheers,

Matthew

Thank you Sakin, you are an absolute pro. I have been amazed by the level of help you and these forums provide.

If you can bare another edit, I would be incredibly grateful if you could tell me why Internet Explorer is providing a different format and colour scheme for the website? In the below link you will see that the menu is white and the sidebar text widget has a significantly smaller width. I don’t have any formatting issues in Chrome, Safari or Firefox. Only IE.

http://www.stakeholderforum.org/fileadmin/files/Mar website internet explorer.jpg

http://www.drmargrau.co.uk/

Cheers,

Matthew

Thanks Sakin, I have ahead and disabled the responsive design and been more dilligent with the closing brackets. I have also run the custom css through the CSS lint program to check for errors. I used to have 4, now I have zero. The only problem is that the site does not properly format in Internet explorer 7 and 8. Is this due to something in the below css? Any insights would be greatly appreciated.

@media screen and (min-width: 961px) {
.home #main { padding-top: 0px; }
.home .hentry { padding-bottom: 0px; }
}
.widget {
background-color: #f99e47;
color: #ffcc00;
}
#branding ul.menu {
text-align: center;
}
#branding ul.menu li {
display: inline-block;
float: none;
}
#branding ul.menu {background-color: #f99e47;}
#branding ul.menu { font-size: 20px;}

#branding ul.menu a {
font-weight: bold;
}
#branding ul.menu li {
border-right: 1px solid #f99e47;
}#branding ul.menu a { padding: 0 70px; }

#sidebar-header-top { padding-top: 0px; }

.entry-header .entry-title { display: none; }

.entry-meta { display: none; }
body {
padding-top: 0;
}

.page #content .type-page { padding-top: 10px; }
.page #content .type-page { padding-bottom: 10px; }

#supplementary {
padding-top: 10px;
}
#secondary .widget { border-top: 0; }

#main .wrapper { background-color: #F99E47; margin-bottom: 20px; }
#secondary .widget { border: none; }
.page #content .type-page { margin-bottom: 0; }

.home #main {
padding: 0;
}
.home .entry-header {
margin: 10;
}
.home #content article {
margin: 10;
padding: 10;
}
.home #secondary {
padding-top: 0;
}
.page #main { padding-top: 0; }
.page #main {
display: inline-block;
width: 100%;}

Many thanks,

Matthew