Mobile breakpoint alignments

Support
#1

Hi,

I’m encountering some issues with my layout on mobile versions. Columns are not perfectly centered. And that seems happening under 370px viewport (I’m testing with Chrome inspector and an iPhone but I’m expecting also some feedback from android users ).

Plus I’ve got some problem with slider revolution too. I’ve set typography for all breakpoint but except from I can’t see texts…

Could you help me in get rid of it?

#2

Hi There,

This issue occurs because you set the fixed width 320px to container class and 1em padding to column for all screen sizes. To fix it, please add this custom CSS under Theme Options > CSS:

@media (max-width: 340px){
    .container {
        min-width: auto;
    }
    .column {
        padding: 0
    }
}

I recommend you use the responsive text feature instead:

  1. For responsive text atrributes

selector – Accepts a unique selector used on any text element that you want to be responsive.

compression – Set this to any number to alter the compression of how slow/fast your text responds as you resize the window. Start at 1.0 and make slow incremental changes to see what works best for you.

min_size – The minimum font size that you want your text to be. Accepts pixel units.

max_size – The maximum font size that you want your text to be. Accepts pixel units.

  1. For font size units

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

For more information kindly refer to the link below.

https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Hope that helps

#3

Thanks a lot the media query work fine with column!
Still have problem with titles… They are in rem, aren’t supposed to reduce if I settled the font for xs screen to 12pt?

#4

Sorry guys I’m just reading about .h-responsive now.
What does it mean that em e rem’s doesn’t work in X-theme and that we have to use class .h-responsive?
But in this case how can I control typography dimensions?

#5

Hi There,

12px is ok for small screens, but that is only the Root Font Size, you set the Headline font-size to 3.847rem (that is 12 x 3.847 = 46.164px).

In small screen, 46px font is still acceptable with short words like Conoce or el Club!, but its kind of a bit too big for a lengthy word like Modalidades

Please adjust your Headline font-size.

Where did you read that? em and rem definitely works on X and PRO. More information here how em and rem works.

“Responsive Text Settings” is using JavaScript to dynamically set the font size based on the text’s relationship to it’s containing element. This is not a native feature of web design, and is something to be used sparingly due to the constant resizing that is needed.

More information about Responsive Text here

Hope this shed some lights,
Cheers!

#6

Thanks for your answer.
I think I find where’s the problem.
I’ve declared typography in General CSS so it probably override base fonts declared in X theme Typography section. Using media queries in General CSS to arrange base font at various breakpoint make titles responsive again.

Just last question. I’ve declared typography attribute in General CSS to manage all text in content area, am I wrong in this approach?

#7

Ok it’s Global CSS and not general… an I didn’t fix it yet putting media queries in Global CSS since that it considers base-font 12px for all the breakpoints instead of setting accordingly to viewport.

Let’s start again.

I want to keep my rem declaration as they are and I fixed base font for small and xsmall display at 12px in XTheme typography section.
What I’m missing to make it work?

#8

Hi There,

In this case, please add this element CSS to your text elements:

@media (max-width: 320px){
  $el{
    font-size: 12px;
  }
}

For more details about the element CSS, please take a look at this:

Hope it helps :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.