Docs

[bak]

Hi I have a few problems with mobile view

1) Why is H1 not centered?
2) Why is the first image so small an the second one so large? How can I make the two images look the same size in mobile view?
3) Why is the line under the first image not centered but sticking to the right?
4) Is there a way to have the table in the tabs element displayed in a mobile friendly way?

[bak]

This reply has been marked as private.

[bak]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! #1 Are you referring to the TROCKENBLOCK KALIBRATOREN custom headline? You can add a class center-text to it so it will be centered.

#2 The first image respond to the width of its container (minus the padding), while the second image has a max-width: 60%; attribute which is keeping the image from going full-width.

#3 That is because you set a fixed width: 300px; to those lines.

#4 It would be best if you utilize the Hide Base On Screen Width feature of ROWs. This means that you need to hide this table on a mobile view (767px and below screens) and then create a new ROW that will display in place of that table when the page is viewed on mobile, with that said you need to came up with a new layout on how you can present the specifications on mobile, maybe some kind of a vertical list.

read more about Hide Base On Screen Width feature here.

#2 and #3 can be solve with this custom css

@media (max-width:  480px) {
   #x-section-4 .x-hr {width: auto !important;}
   #x-section-4 .x-1-1 {padding-left: 9% !important;}
   #x-section-4 .x-img {max-width: 100% !important;}
}

Hope it helps, Cheers!

[bak]

Hi, thank you for your answer

1) Adding center-text centers the text also on desktop. On desktop it should be left and on mobile center alignes.
2 & 3) Great that helped. Just for me to know: does this CSS only apply to the page in question or does it influence x-section-4 on other pages? If so, how can I make it specific to this page only?

[Jade]

Hi there,

#1 Please add this CSS:

@media (max-width: 797px) {
   .page-id-1562 h1.h-custom-headline.mtn.h1 {
        text-align: center;
    }
} 

#2 Please update the code to:

@media (max-width:  480px) {
   .page-id-1562 #x-section-4 .x-hr {width: auto !important;}
   .page-id-1562 #x-section-4 .x-1-1 {padding-left: 9% !important;}
   .page-id-1562 #x-section-4 .x-img {max-width: 100% !important;}
}

Hope this helps.

[bak]

This reply has been marked as private.

[Rad]

Hi there,

How about this,

@media (max-width: 797px){
.center_custom_headline_on_mobile {
text-align: center !important;
display: block;
width: 100%;
}
}

Then instead just add center_custom_headline_on_mobile to your custom headline’s class input. This ensures that it will be applied on specific headline and page only.

Hope this helps.

[bak]

Problem solved, perfect. Thanks!

[Christian]

You’re welcome. Glad we could help. 🙂

[Author]

Posts