Canvas Support

CSS responsive issues

5 replies · opened Jul 13, 2018

FFLAVEXJul 13, 2018

Hi Team

I need to update several CSS issues due to the some content of the landing page is invisible on mobile versions:

  1. You can't read the section highlighted in red on the attached file css-mobile-issues-1.jpg. Can you help and point me what's the code line to increase the size of the font?
  2. The section 'Le Ofrecemos Soluciones 360' don't display the background image displayed on desktop version, instead of this file, a grey background is displayed. So, the white color turns difficult to read the text, and the grey text it's invisible on mobile version. Maybe if I turn all the texts to black will looks better, but I'm not sure. Also I want to increase the size of the fonts for mobile version and receive some suggestions regarding the correct color of the text in order to have the best option for both versions, mobile and desktop. BTW, the button SEND/ENVIAR don't change when the mouse is over. Do you know why the hover attribute it's now working?
  3. I have to increase the size of the font on the side panel contact form because it's very hard to read in mobile versions. Can you point me what's the code line I have to update?
  4. I've to increase the size of the font of the mega-menu items because is very hard to read on mobile versions. Can you point me what's the code line I have to update?

Useful information:
Website: https://comprosuauto.cash
FTP data – User: comprosuautocristian – Pass: Fiesta.2019.2020

Thanks for your help.

Regards.

FFLAVEXJul 17, 2018

Hi

Why you skipped my post?

Regards.

FFLAVEXJul 18, 2018

Hi

6 days have been pass without a response from you. I can not charge for my work until I fix these issues.

PLEASE REPLY ASAP!

Thanks.

SSemicolon WebSTAFFJul 19, 2018

Hello,

  1. Consider using the following code:
.heading-block ~ p:not(.lead) { font-size: 15px; }
  1. The section appears to be displaying the Background Image properly. To change the Text to Dark, simply remove the .dark Class from the .section Container. To increase the font use the following code:
.section p:not(.lead) { font-size: 14px; }

As we explained earlier we are working on a Update for this and will release it soon to fix the issue with Hover Colors on Buttons and some Links.

  1. Consider using the following code:
.widget p:not(.lead) {
    font-size: 14px;
}
  1. Consider using the following code:
#primary-menu ul ul li > a,
#primary-menu ul li .mega-menu-content.style-2 ul.mega-menu-column > li.mega-menu-title > a { font-size: 13px; }

Please consider checking the appropriate CSS Blocks using the Browser's Inspect Element selector to change the Fonts according to your needs.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

FFLAVEXJul 25, 2018

Hi Team

Thanks.

  1. Worked.

  2. "The section appears to be displaying the Background Image properly." Yes, that's true, but in mobile version, a white overlay is over the image, so, the text is almost unreadable and only the title is readable. Can you tell me if it's possible to erase this white overlay on mobile version? Also the code '.section p:not(.lead) { font-size: 14px; }' don't work. I've worked with the Browser’s Inspect Element selector and I was able to fix almost all the CSS issues, but in mobile version, the color and the size of the fonts doesn't changed on this section (it worked on desktop versions). Do you know why?

  3. I don't know where to add your code. Anyway, I used the browser's inspector.

  4. Fixed with the browser's inspector.

Thanks for your help.

Regards.

SSemicolon WebSTAFFJul 26, 2018

Hello,

For all the Custom CSS Code, make sure that you are using the css/custom.css File as described in the Documentation > Start > Customization Section so that the Updates are handled easily.

  1. Please use the following code to disable the White Background:

We suspect that the issue is due to not using the css/custom.css File as if you are editing just the style.css File, it still gets overwritten by the css/responsive.css CSS Styles. So it is highly recommended to use the css/custom.css File for all your Customizations to be applied correctly.

  1. Inside the css/custom.css File.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
CSS responsive issues · Canvas Template Support