Changing Font Color and deleting a line homepage

Hello. My website is davidshkim.com.

I’d like to make three changes to my website.

  1. Change the font color of “sales funnel, targeted traffic, conversions” under “How i can help you generate revenue” on the home page.

  2. I would like to delete the red line appearing below “How I can help you generate revenue”.

  3. Change my alignment of my three text snippets under “How I can…” section so that they appear in rectangular “justify text” structure. Can I also space these out a bit further?

Thank you very much for your help.

Hi,

  1. You can change the color of “sales funnel, targeted traffic, conversions” under “How i can help you generate revenue” with this Custom CSS:
#panel-466-1-0-0 .service h3, #panel-466-1-0-0 .service h4 {
    color: red !important;
}
  1. You can remove that line from every widget-title with this Custom CSS:
.panel-grid-cell .widget-title:after {
    display: none !important;
}

or you can hide it from just below “How I can help you generate revenue” with this Custom CSS:

#panel-466-1-0-0 .widget-title:after {
    display: none !important;
}
  1. You can justify the text of the service box with this Custom CSS:
.roll-icon-box .content p {
    text-align: justify !important;
}

and please let me know what would you like to space out on it if you will still want to do that after justify aligning the text.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Thanks Csaba.

I also find that my homepage design is not mobile-friendly. You can see that the site title doesn’t even show up and it looks like a lot of dimensions are out of place.

Could you help me to see the mobile version the same way I see it on a desktop? Thank you.

Hi,

Please post links to a screenshots where I can see the mobile issues.

Best Regards,
Csaba

Mobile: http://i.imgur.com/94ApljK.png
Tablet: http://i.imgur.com/Ad5rG2G.png

Whenever the website loads on a screen that has a resolution smaller than laptop/desktop, it shows the white bar above at top and the header description (Hi I’m David) and menus disappear.

Hi,

Do you mean the bar with the Logo image? I can’t see any other white bar.

Best Regards,
Csaba

Yes. The bar with the Logo image is taking up too much space at the top.

Could you help me figure out how to recover my Menu options or my header title on mobile screen?

Hi,

Do you want to modify the height of your menu or do you want to remove it? Please let me know. Your menu options are there, just the menu button is white ( like your background ), so it’s invisible, but you can change it’s color to black with this Custom CSS:

.btn-menu {
    color: black !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Thanks Csaba for your continuous support.

Yes, I would like to decrease the padding of the white bar space when viewed in mobile. I changed my menu button to black, but the the bar with Logo image still looks a bit too big for the mobile screen.

Could you please help me thin out the height/padding of the white space above the menu button and change the color of it so that it’s the same color as the background color of the logo (grayish)?

This is what the mobile version looks like now: http://imgur.com/eXFWlRF

This is the color code of the background logo: HTML code: #BEC0B2
RGB code: R: 190 G: 192 B: 178

Thanks again.

Hi,

You can reduce the height of the menu on mobile and you can change the color of the menu with this Custom CSS:

@media only screen and (max-width: 768px) {
.site-header {
    padding: 0 !important;
}

.btn-menu {
    color: #BEC0B2 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}
}

if you want to reduce the menu even more, then you must reduce the logo size with this Custom CSS:

@media only screen and (max-width: 768px) {
.site-logo {
    max-height: 50px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba