Few Issues

Support
#1

Hi,

I have just finished another pro site but have a few issues that I have been unable to find the solution for.

  1. I have a 5 column section on desktop that I would like to keep as a 5 column section on mobile and other devices, how can this be done?

  2. I have two contact forms on one page that needed styling differently. How do I target two different Contact forms (CF7) on the same page with slightly different CSS? The CSS that I have used for the first one which works perfectly is below, I need to use this just with different values for the 2nd contact form on the same page, this is placed in the css section for the specific page the contact form is on.

/* 1st contact form - grey text and no border - CONTACT FORM 7 */

select, textarea, input[type=“text”], input[type=“password”], input[type=“datetime”], input[type=“datetime-local”], input[type=“date”], input[type=“month”], input[type=“time”], input[type=“week”], input[type=“number”], input[type=“email”], input[type=“url”], input[type=“search”], input[type=“tel”], input[type=“color”], .uneditable-input {
border: medium none;
background: #ffffff
}

.wpcf7-form label {
color: rgb(110, 111, 114);
}

  1. I have created a header in pro which works great, is there a way to keep the link highlighted in the menu when your on that page?

  2. I use the following code to take away column padding on mobile on certain sections (it normally works fine):

#x-section-4 .x-column{
padding-left:0 !important;
padding-right:0 !important;
}

However as you can see on screenshot (first image) it doesn’t seem to take away the padding where the image is, how can I fix this?

  1. The final issue is with the bottom of the footer (the black section right at the bottom), its seems to center to the left even though in the footer builder it in centered perfectly.

You will have to check out the website as I can only upload one image.

Thank you for taking your time to look at these issues.

Nathan

#2

Hi there,

Thanks for posting in.

  1. Please add this CSS to your global custom CSS
.x-section.force_columns .x-column.x-1-5, .x-section .force_columns .x-column.x-1-5 {
    width: 16.8% !important;
    float: left !important;
    margin-right: 4% !important;
}
.x-section.force_columns .x-column.x-1-5:last-child, .x-section .force_columns .x-column.x-1-5:last-child {
margin-right: 0 !important;
}

.x-section.force_columns .x-container.marginless-columns .x-column.x-1-5, .x-section .force_columns.x-container.marginless-columns .x-column.x-1-5 {
    width: 20% !important;
    float: left !important;
    margin-right: 0 !important;
}

Then simply add force_columns to your section or row’s Class input field.

  1. You can use their unique selector, example
/* 1st contact form - grey text and no border - CONTACT FORM 7 */

#wpcf7-f157-p73-o1 select, 
#wpcf7-f157-p73-o1 textarea, input[type="text"], 
#wpcf7-f157-p73-o1 input[type="password"], 
#wpcf7-f157-p73-o1 input[type="datetime"], 
#wpcf7-f157-p73-o1 input[type="datetime-local"], 
#wpcf7-f157-p73-o1 input[type="date"], 
#wpcf7-f157-p73-o1 input[type="month"], 
#wpcf7-f157-p73-o1 input[type="time"], 
#wpcf7-f157-p73-o1 input[type="week"], 
#wpcf7-f157-p73-o1 input[type="number"], 
#wpcf7-f157-p73-o1 input[type="email"], 
#wpcf7-f157-p73-o1 input[type="url"], 
#wpcf7-f157-p73-o1 input[type="search"], 
#wpcf7-f157-p73-o1 input[type="tel"], 
#wpcf7-f157-p73-o1 input[type="color"], 
#wpcf7-f157-p73-o1 .uneditable-input {
border: medium none;
background: #ffffff
}

#wpcf7-f157-p73-o1 .wpcf7-form label {
color: rgb(110, 111, 114);
}

Where #wpcf7-f157-p73-o1 is the ID for that specific form. You can find your form ID by using any browser developer tool (inspector), and inspect its code and you’ll find something like this

<div role="form" class="wpcf7" id="wpcf7-f157-p73-o1" lang="en-GB" dir="ltr">
<div class="screen-reader-response"></div>

Please check this https://developer.chrome.com/devtools

  1. About the highlight, please add this code to your global custom javascript, it’s known bug and should be fixed in next updates
setInterval( function() {
jQuery( '.current-menu-item a' ).each( function() {
jQuery(this).addClass('x-interactive');
jQuery(this).parent().find('a > span > span').addClass('x-active');
} ); }, 300);
  1. It should be like this,
#x-section-3 .x-column{
   padding-left:0 !important;
   padding-right:0 !important;
}

It should be a correct ID with # sign.

  1. What do you mean by centered to the left? It looks the same in both builder and actual page. Would you mind providing a mockup design of how it should be?

Thanks.

#3

Hi,

Thank you for your reply.

  1. Fixed, worked perfectly

  2. Fixed

  3. Fixed

  4. This code still isn’t working on a column with an image on please see screenshot of mobile view > https://drive.google.com/file/d/0B6DIb2F66CsySlFQSS1ZNHh1SjQ/view?usp=sharing , the code is used for that section but still column padding is on, I know the code works as I have it working on other sections of the website but for some reason it will not work on this column.

#x-section-3 .x-column{
padding-left:0 !important;
padding-right:0 !important;
}

  1. Please see this screenshot showing of bottom of footer in builder > https://drive.google.com/file/d/0B6DIb2F66CsyNEo3RzNfLVA5dXc/view?usp=sharing

Please see this screenshot of bottom of footer on live website > https://drive.google.com/file/d/0B6DIb2F66CsyaUZTWXg3MFpDV1k/view?usp=sharing

see how it goes to the left on the live website?

Thank you for your great help so far :grinning:

Nathan

#4

Hi Nathan,

4.) This is what I am seeing now: https://screencast-o-matic.com/watch/cbQUf0IwGC

Choose Start for both Bar > Flex Layout. The one with columns is set to center while the one copyright is set to start. See below settings for each bar, set it the same value START

Hope this helps.