Changes needed

[Lorena García Rubio]

Hello,

 

I need to:

* Resize the company logo

* Show an image inside the featured services circles (I need the image to cover the whole circle, not just part of the circle)

* Change the colour of the text of the call-to-action panel

[Andy]

* Resize the company logo
The logo can be any size you want. The theme recommends 220×70 but you can use a different size and you do not need to crop the image to 220×70 if you do not wish to do so.

* Show an image inside the featured services circles (I need the image to cover the whole circle, not just part of the circle)
Add the following to ‘Additional CSS’ in the customizer:

.featured-post .featured-icon img {
    width: 100%;
    margin-top: 0;
}

* Change the colour of the text of the call-to-action panel
Again in ‘Additional CSS’ (change #fff to your preferred color):

#cta-section {
    color: #fff;
}

[Lorena García Rubio]

Hi,

The featured services look better, but still not ok. Please see pic attached.

Text color in the call to action, just don´t work

[Andy]

The images you are using for the featured services are not equal width/height. The first image is 5184 x 3456 pixels!
To fill the circular area, each image’s height and width should be the same. e.g. 160 x 160 pixels.

Alternatively, you could add a line of CSS code to force the images to fill the height of the circle – height: 100% – but they would be stretched vertically and may not look right.
In ‘Additional CSS’:

.featured-post .featured-icon img {
    width: 100%;
    margin-top: 0;
    height: 100%;
}

Sorry, you asked how to change the text color, not the telephone link. Use this instead:

#cta-section a .cta-tel,
#cta-section a:hover .cta-tel {
    color: #9d0200;
}

[Lorena García Rubio]

BTW, the logo used is 830×298. And it is far bigger than the one recommended, and it still does not change size.  I need the logo to appear bigger

[Andy]

The logo at 830px wide is far too big to fit in the logo area.

As you are not using the Site Description/Tagline, you could make the logo area use the tagline area in addition to the standard logo area by adding this Additional CSS:

@media screen and (min-width: 1025px){
    #site-branding{
        width: 50%;
    }
    #site-description{
        display: none;
    }
}

[Author]

Posts