[mhbmartijnParticipant]

Hi! my mobile version need some adjustments that I am not able to do myselve!
– I want to make the custom headlines in the whole website appear smaller on mobile
– I want to make the footer social images smaller on mobile (just like as they show up in the topbar) and the footer text smaller also on mobile version
– For some reason the text in my get-in-touch page is way bigger then other text on mobile
– On support-me page the text-type doesn’t work on mobile, is this know or do I have to tweak this?

Ok thanks a million again and again 🙂

[mhbmartijnParticipant]

This reply has been marked as private.

[NicoModerator]

Hi Mhbmartijn,

Thanks for writing in.

To help you, would you mind sharing us a screenshot of each changes you want to achieve so we could use it as a guide and to prevent long thread

Thanks.

[mhbmartijnParticipant]

here they are 🙂

[Paul RModerator]

Hi,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 480px) {
/* custom headlines font sizes */
h1,.h1{ font-size:400%; }

h2,.h2{ font-size:285.7%; }

h3,.h3{ font-size:228.5%; }

h4,.h4{ font-size:171.4%; }

h5,.h5{ font-size:150%; }

h6,.h6{ font-size:100%; }

/* footer menu font size */
.x-colophon.bottom .x-nav li a {
    font-size: 1.3rem;
}

/* footer text font size */
.x-colophon.bottom .x-colophon-content {
    font-size: 14px;
}

}

Change the font size for each element to achieve your desired result.

Hope that helps

[mhbmartijnParticipant]

Thanks, it worked, still two questions stay open:
– I want to make the footer social images smaller on mobile (just like as they show up in the topbar)
– On support-me page the text-type doesn’t type fully on mobile, is this know or do I have to tweak this?

[RupokMember]

Hi there,

Thanks for updating.

#1. You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 480px) {

.x-colophon.bottom .x-social-global a {
  font-size: 18px;
  height: 32px;
  line-height: 32px;
  margin-left: 6px;
  text-align: center;
  width: 32px;
}
}

Hope this helps.

Cheers!

[mhbmartijnParticipant]

Yes thanks! Two questions remain:

– What about the text type? I now have disabled it for mobile and put in normal text, but is it possible to get it work fully typing on mobile or would you suggest to keep it disabled?

– On my pages where my rows are 2/3 + 1/3 the two parts of the rows are showing underneath eachother. Though the parts don’t fully load on the page, they have allot of spacing on the left and right. So my blogpost has the same settings but without the 2/3 and 1/3 and has the good spacing on right and left. I would like on mobile version to my pages to show up the same as my blogpost.

Screenshots added, thank you so much

[RupokMember]

Hi there,

Thanks for updating.

#1. I can see you have hide the section for mobile and displaying another section with a Text Element (not Text Type) – http://prntscr.com/apb6mh

See on Cornerstone – http://prntscr.com/apb7uk

So check the visibility settings by selecting the Section.

(If Mobile icon is checked then the content will be hidden for mobile devices)

#2. So you want to decrease the padding on left and right on mobile that you have set? In that case you can use this :

@media only screen and (max-width: 480px) {
.x-column.x-sm {
  padding: 0 !important;
}
}

Hope this makes sense.

Cheers!

[mhbmartijnParticipant]

#1 yes I know like I said this is my alternative version I came up with. I want to know if there are problems with type text on mobile version, because It doesnt type all the text.

#2 this doesn’t work sorry

Thanks for taking the time

[Rue NelModerator]

Hello There,

#1] The text type should work in smaller screens with no issue at all. Please keep in mind that the text type will depend on the width on its container. If ever the container is not wide enough, some of the text may not be visible.

#2] Please update the css code because you have added a padding in your sections. You must this is instead:

@media only screen and (max-width: 480px) {
  .x-section,
  .x-column.x-sm {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Hope this helps.

[mhbmartijnParticipant]

YES!!! Thank you the code before made a problem with my background pictures because it adressed all the padding.
Thanksss!

[JadeModerator]

You’re most welcome.

[Author]

Posts