Need help with responsive version of site?

[WillWashington]

Hi, if you could please take a look at https://easystartup.net/products-services/ everything is fine with the “product boxes” I have created which are actually made with separate rows. On the computer screen (larger display) it looks great but on the mobile version I see some problems:

1. there are gaps between some of the rows but not others

2. on the title of each ‘product box’ on the computer you see I have the title with a solid white background behind the set only, for example “Web Design” or “Digital Marketing” - but on the mobile because I set the width of the white bar to x (500px in this case) on the mobile device it’s obviously spanning off the screen and not looking correct, how can I fix this?

3. also similar to #2, the images I have in the columns of each ‘product box’ are being pushed out of the area on a mobile device (tested with iPhone 8) and showing up half way in the box and half way to the right, hanging out of the box

Thanks so much in advance guys.

[nabeel]

Hi William,

Thank you for reaching out to us.

• To remove the gaps between your rows in small devices, please add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .x-section .x-container.marginless-columns .x-text {
        margin: 0;
    }
}

• For the headline element, please change the Width to auto and set the Max Width to 500px in the settings to fix the issue (see screenshot).

• Do the same for images, change the Width to auto and set the Max Width to 300px in the settings to fix the issue (see screenshot).

Let us know how this goes!

[WillWashington]

Thanks! All of those changes worked perfectly, can’t believe I didn’t realize about the auto/fixed width thing! Hiding in plain sight!

I have another question, on my home page you can see I have a Contact Form 7 ‘contact form’ at the very bottom of the page,

Can you please help me with some css code (or something else? not sure) to change the size of the font on the form and the color of it? - Also I have 4 radio boxes “Web DesignDigital MarketingBusiness StrategyDigital Support” I would like to add a space between each of the options, as you can see currently they are condensed together.

I also would like to change the color and hover effect of the Submit button at the bottom of the Contact Form

Thanks in advance again, my site is starting to come together!

[paul.r]

Hi,

To change the colors, you can add the code below in Cornerstone > CSS

.wpcf7 label,
.wpcf7-list-item-label {
    color: red;  
    font-size: 15px;
}


.wpcf7 .wpcf7-list-item input[type="checkbox"] {
    margin-right: 3px;
}

.wpcf7 .wpcf7-list-item {
   margin: 0 5px;
}


.wpcf7  .wpcf7-submit {
    color: white;    
    background-color: red;
}

.wpcf7  .wpcf7-submit:hover {
    color: white;    
    background-color: blue;
}

I am sending you some resources in case you want to learn some css

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps