CSS customization for problems with responsive features

• 

  mmspd · Member · Jan 19, 2017 at 5:57 pm

  • Copy link
  • Add topic to favorites

  Hi. I´ve just notice that my site is not being responsive as on iphone I cannot see it formatted. The theme is supposed to be responsive and the settings for mobile phone are correct. On live chat I´ve been told this may be happening because I´ve added quit a bit of Custom CSS and that here I could get help to solve this problem.
  If someone could help me with CSS customization to solve this problem, that would be great. I cannot take way what I´ve done on CSS because that is the base of customization of the site.

  Thank you very much

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 20, 2017 at 1:35 am

  • Copy link

  Hi there, when you are wanting to change the indent on something like an ordered or unordered list, it is best to do it with a left margin instead of position relative and then a left value. When you do that, what you do is to shift the entire div position, so in the case of the ones on your site, the right side of them ends up hidden. Find this in your custom CSS and change it to what I have below.

  ul {
  	margin-left: 50px;
  }

  I also notice an issue with your menu. Find this CSS rule in your custom CSS
  .main-navigation .primary-menu>li>a
  and replace it with this Media Query, which limits this change to when the full menu is showing and let’s things go back to the original design when the touch menu activates.

  @media screen and (min-width: 896px) {
  .main-navigation .primary-menu>li>a {
  	position:relative;
  	right:50px
  }
  }

  Next, find this in your custom CSS

  td {
      line-height: 0.5em;
  }

  and replace it with this.

  td p {
  	margin-bottom: 0.3em;
  }

  That catches everything I can see that has an issue. If you know of others, or find others, let me know, and let me know how this goes for you.

• 

  mmspd · Member · Jan 20, 2017 at 3:14 pm

  • Copy link

  Hi. I have applied the code you gave me and it did improve, but the big text is still not fitting.
  Additionally, now I am not being able to modify the font color on my page 521 with the same code as I have done for the others. And another thing is that I am not able anymore to see the bottom of of the CSS code, it is not rolling down after a certain point. So I cannot even check the code.
  When I changed the code I have lost the red color I added to the line under the menu and to the mouse tracing (hover).
  Would it be possible another look to see what is happening. It would be really important to have it working on any device!
  Thanks

• 

  thesacredpath · Member · Jan 20, 2017 at 10:51 pm

  • Copy link

  The problem is that the big text is too large to show on a mobile device. We can use a Media Query to downsize the text for smaller devices, but you are going to have to edit things and remove the inline styling from that larger text and add a CSS class so we can handle it with custom CSS. On the larger text, you want the opening h1 tag to look like this
  <h1 class"my-h1">
  and then add the following to the very bottom of your custom CSS.

  .my-h1 {
  	text-align: center;
  	font-size: 200px;
  	font-weight: bold;
  }
  @media screen and (max-width: 768px) {
  	.my-h1 {
  		font-size: 150px;
  	}
  }
  @media screen and (max-width: 600px) {
  	.my-h1 {
  		font-size: 120px;
  	}
  }
  @media screen and (max-width: 480px) {
  	.my-h1 {
  		font-size: 60px;
  	}
  }

  On the border under the current menu item, add the following CSS. I pulled the color from your site logo. You can adjust as desired.

  .main-navigation .primary-menu .current_page_item > a, .main-navigation .primary-menu .current-menu-item > a, .main-navigation .primary-menu .current_page_ancestor > a {
  	border-color: #E30226;
  }

• 

  mmspd · Member · Jan 20, 2017 at 11:56 pm

  • Copy link

  Hi! Thanks.

  I am not sure where I should add this <h1 class”my-h1>
  I´ve added the code you gave me almost at the end of the CSS but as I said the bottom is not showing. I have a line of other media screen and further than that I am not accessing so I couldn t place this code really at the end. Should I delete the other media screen that I have there?

  Thanks

• 

  thesacredpath · Member · Jan 21, 2017 at 3:03 am

  • Copy link

  You have to edit those individual pages. For example, open the Quem page in the page editor, switch to the text tag, and you will see this.

  <div id="Quem">
  <h1 class"my-h1">QUEM</h1>
  </div>

  You want to turn that into this.

  <div id="Quem">
  <h1 style="text-align: center; font-size: 200px; font-weight: bold;">QUEM</h1>
  </div>

  Do that to the other pages that have the large text over the image.

• 

  mmspd · Member · Jan 25, 2017 at 10:56 am

  • Copy link

  Hi. I have done that basically with Quem and Como pages which were the ones with problems on mobile. But the problem remains. I may be missing some steps on this. But I am not being able to solve it. Would you be able to identify what else is wrong?
  Mobile version on the site is still not great. Another thing that I would like to customize is the mouse trace… it is blue and I would like to have it red. The same for the Menu that shows on mobile version. It is blue and I would like to have it red.
  Let me know if you can help me to spot what is wrong with the big text on mobile and then we´ll see the other issues.

  Thank you

• 

  mmspd · Member · Jan 25, 2017 at 12:03 pm

  • Copy link

  It is solved now. Though the support of the chat support service we could identify what I had wrong! Thank you very much!

• 

  thesacredpath · Member · Jan 25, 2017 at 7:22 pm

  • Copy link

  You are welcome.