Mobile Issues - Spacing After Menu, Line in Header, Text

Support
#1

A few questions :slight_smile:

  1. Reduce Spacing After Menu on Mobile - how can I achieve this?

  2. Remove Thin Line from Header - very faint but noticeable only on the mobile.

  3. For the Home Page, I noticed that the type does not stretch from side to side like the rest of my pages. Do you know why this is? The only differentiating factor I can identify is the other pages are fullwidth verses the home page that is a different style.

#2

Hi Samantha,

Thanks for reaching out.

  1. It’s due to 100px height which I think meant for desktop, please add this to Theme Options > CSS to change it without affecting the view on desktop
@media ( max-width: 767px) {
.x-navbar-inner {
    min-height: 0px !important;
}
}

  1. The thin line that I’m seeing on my end and even from your screenshots are coming from the video. It disappears once it’s played, it’s something can’t be fix through CSS.

  2. It’s due to the 50px border width that you applied on those sections. Please set them to zero.

Thanks!

#3

Again, awesome response!

  1. Fixed - thank you

  2. The thin line is actually in the blue section above the menu in the header, and not in the white section for the video. Can you look again? It is noticeable on the phone.

  3. The margin is set to zero already? Will include secure note with login.

  4. Do you know how to reduce the space between images on the blog?

#4

Hi,

  1. To remove it, you can add the code below in Theme Options > CSS 
@media (max-width: 767px) {
.x-topbar .p-info {
     border:0;
}
}
  1. I checked and its the 50px border of your sections that is causing the space.

  1. To reduce the space, you can add this in Theme Options > CSS 
.blog .x-main .hentry, 
.search .x-main .hentry, 
.archive .x-main .hentry {
    margin-top: 15px;
    padding-top: 15px;
}

You may change 15px to achieve the spacing that you want.

Hope this helps

#5

  1. Fixed - thank you!

  2. Fixed - thank you!

  3. Fixed, thank you for catching that! I searched all over and appreciate you seeing it.

  4. When inputting the code, it did not reduce the space between images in blog posts. Could you review again? Essentially, I want to reduce the white space between images in just blog posts. (Including image below)

#6

Hi Samantha,

Please try adding this custom CSS under Theme Options > CSS:

.single-post img.aligncenter {
    margin-bottom: 9px;
}

Hope it helps :slight_smile:

#7

Thank you! Random question - can you add a contact form 7 to your footer? I do not see the option under the widgets?

#8

Hi Samantha,

First you need to enable Footer widget areas by head over to X -> Theme Options -> Footer area.

Then you can head over to Appearance -> Widgets area and place a Text widget area with your Contact Form shortcode.

Hope that helps.

#10

After adding the code, I found that the form was showing as having white font on a white background, however I would like for it to be the same background color as the footer at the bottom. Do you know how I can accomplish this? Is there also a way to change the font colors and title of widget in the future if I would like too?

#11

Hello Samantha,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
    color: #6a7884;
    background-color: #6a7884;
}

.wpcf7 p {
    color: #fff;
}

Between color and background color in above code you can remove the one that’s not required.

Here are some related links for further reading:

Hope this helps.

#12

Need further clarification - verses making the background white, it made the contact form fields blue?

#13

Hi there,

Please try this code:

#wpcf7-f2582-p456-o1 {
    background-color: #6a7884;
    padding: 20px;
}

Hope this helps.

#14

Nothing changed? The background is still white?

#15

Hello Samantha,

Please have the css code updated and use this instead:

#wpcf7-f2582-p20796-o1 {
    background-color: white;
    padding: 20px;
}

#wpcf7-f2582-p20796-o1 .wpcf7-form-control.wpcf7-text{
    background-color: #6a7884;
}

And the result would be this:

Please let us know how it goes.

#16

Hello - okay there is definitely a lot of confusion. Please completely ignore the contract form with the background image of people. I want to remove that one and in turn place a new one in the widget area. That is the picture that I sent prior. I can’t leave a blank looking contact form on my website, so I have to remove it every time after taking a screenshot.

For the image below (previously sent), you will see four fields and a submit button which is the contact form that I want to implement.

  1. The background is currently white, I would like for it to match my footer, how can I accomplish this?
  2. How can I accomplish changing the color of the submit button?
  3. How can I change the font color above each field?

Again - please disregard the current contact form with a background of people. I just want to implement a new form in the footer widget.

#17

Hi Samantha,

Please start a new thread for each issue or question, it’s better for prevent confusion and easier to track.

For now, I’ll provide answer based on what I’m seeing

  1. Please add this CSS
.x-colophon.top {
background-color: rgb(104,120,134) !important;
}
  1. This too with your preferred color.
.x-colophon.top .wpcf7-submit {
background-color: red !important;
}
  1. And this too,
.x-colophon.top .wpcf7-form p, .x-colophon.top .wpcf7-form {
color: pink !important;
}

Thanks!

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.