How to lock services block size

Hi Vlad

I got four questions:

  • How do I lock the size of the services blocks? Currently, I get various block sizes depending on how much text I put in there which looks quite bad.

  • How do I change the background color of these services blocks? I can change font color etc, but not the background color (not the background image, but the block background)

  • How do I change the color of the button shadow?
    Screenshot2

  • When will the header scroll issue be fixed? (a few weeks ago you said “soon” :wink: )

thanks a lot for your help!
luddy.

Hey,

Why not set the background image for that row from the Edit Row option instead of the widget itself? That way those background will disappear. And the option you’re using has been marked as deprecated for some time now :slight_smile:

I’m not seeing the second image you posted regarding the button.

Perhaps you can post a link to your site, but I’m pretty sure that issue was fixed a long time ago :slight_smile:

Thanks Vlad.
This worked, but doesn’t seem to display it properly on mobile (www.artofmarketing.ch/wordpress)
And yes, the scroll issue has been resolved, I was missing the update.

  • Is there a way I can only display two Services per row instead of three? Or can I change the width of the blocks. I currently have a title (Suchmaschinenoptimierung) that doesn’t display on one line. Alternatively, can I make the header font smaller?

  • there is an issue with my call to action button in the header.

thanks!
chris

What are you referring to regarding the mobile? To the fact that the image doesn’t go behind all the services? That’s because your image isn’t big enough in height but you can do a change with some custom CSS in case that’s what you mean.

Making the service titles smaller would be the best way to go about this. Use this in a custom CSS plugin please:


.service-title {
    font-size: 18px;
}

What issue are you seeing with the button? Just checked and it looks fine for me in all my browsers.

Hi Vlad

Great, thanks! The font resizing worked fine. The button seems to show some error on safari, other browsers are fine.

For the mobile: Yes, I would like it to have the same parallax effect as on desktop devices. Currently the background picture does not stay in place on mobile. Or should I set it as overall background instead of row/widget background?

thanks very much for your ongoing help, highly appreciated!
luddy

Can you please tell me if you’re checking on Safari for Windows or for Mac?

Having it parallax on mobile is not the best option as it may cause issues on some mobiles. But you can give it a shot if you want:


@media screen and (max-width: 1024px) {
    .panel-row-style {
         background-attachment: fixed !important;
    }
}

The only other option would be to use this instead (it won’t provide the parallax effect but it will stretch the image to cover the whole row - a bigger image might be needed):


@media screen and (max-width: 1024px) {
    .panel-row-style {
         background-size: cover !important;
    }
}

it’s on safari 6.1.6. on mac 10.7.5. It doesn’t seem to be a cache issue either. Here’s what it looks like:

the mobile looks much better with version 2 of what you have sent, thank you! I do not get the header-page content displayed on mobile though, only the background. Am I missing a setting here?

Also, these little things popped up next to my social media buttons:

how do I get rid of them?

thank you!
luddy

I don’t think that Safari is even updated anymore. Anyway, this should do it:


.welcome-info {
    display: block;
}

You’re not missing a setting, the description and the button are hidden on small screens because there wouldn’t be any space for them.

You’ve added fa-facebook etc in your classes for the social menu. You don’t need them, the social menu displays the necessary icons automatically.