[Irbi]

Hello, met a problem after adding the image to the header. The image displays perfectly on a wide screen but doesn’t scale on other devices such as other PC, ipad and phone.
How can I make it scalable depending on the screen width? I want it to fit any screen.

Thanks!

[Sakin]

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

[Irbi]

Sakin, here’s the site http://photoyachting.ru/

You may see that the slider image is the same as in the header. In slider it always displays correctly whatever device I use, while the image in the header doesn’t scale to the screen width when I open the site on ipad for example: the menu bar moves up on the image and the image is not displayed in full width (the ship on the right is cut). The same with mobile phone and screens less than 1024.
Perhaps I need to add something in the custom css. Currently it is as follows:

#masthead { background: url(“http://photoyachting.ru/wp-content/themes/catch-everest-pro/images/header-image.jpg”) no-repeat scroll 0 0 transparent; }

[Sakin]

@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; }

[Irbi]

Great! It is exactly what I need! Fits everything perfectly 🙂
Thanks a lot, Sakin!

[eatcho]

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?

[Sakin]

@eatcho: No need to delete that image. Don’t keep it random. Just click on “Remove Image” from “Appearance => Header”. But after that if you don’t want that image in your site then you can remove it from “Media => Library”

[eatcho]

wow , your a lifesaver thanks!!

[eatcho]

Now I keep changing the site url in my logo link and even though I save it , it keeps returning to present state to linking to blog and not the parent site…is this more of a word press issue?

[Sakin]

@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]

Hi,

New user for Catch Evolution Pro. Dew questions:

1. How to remove the rotating pictures that comes with the theme (house & flower)
2. How to decrease header hight
3. how to modify the comment backround (it’s gray)
4. How to change the menu and title to left to right.

Thank you,
Guy

[Sakin]

@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.

[Matthew]

Hi Sakin,

I am having similar problems with the formatting of my header on ipads. My header has an equal width on the desktop version of the site, but when using responsive design for ipads, the width of the header has a smaller width compared to the menu and the combined content of the ´page´ and widget below? Am I able to fix this in the CSS? Any advice would be greatly appreciated.

Many thanks,

Matthew

[Matthew]

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

[Sakin]

@Matthew: I am not so sure what are you trying to accomplish in your iPad. You have already modified your site to greater extend and few of your css might not be compatible with responsive design. So, if you want same design to show in your iPad then you can simply disable responsive design from “Appearance => Theme Options => Responsive Design”

[Matthew]

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

[Sakin]

@Matthew: Try adding in the following CSS in Catch Evolution Pro Custom CSS box at “Appearance => Custom CSS” box.

.page #main {
    display: inline-block;
    width: 100%;
}

[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

[Sakin]

@Matthew: I see there is issue in your CSS in “Appearance => Theme Options => Custom CSS box”. You custom css is totally messes up with mixed css starting from @media screen and (min-width: 961px) {. So first, delete all the custom css and add one by one what you need. Also looking at theme design you need to disable responsive design. You need to check all your closing brackets }

[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

[Author]

Posts