[MatthieuDelageParticipant]

Hi,

The mobile version of my website http://www.singandplay.fr is not fitted to the screen.

I created this website simply by copying and pasting the structure of another website of mine, http://www.clasesdeguitarramadrid.net. That website works well.

I have some custom CSS on both websites, which is almost the same except for a few details. I’m not sure which one is creating the issue (or if it’s an issue with classes in cornerstone).

Could you help out? Thanks in advance!

[MatthieuDelageParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Please remove the margin left and right in your sections with the videos.

Then add this in Cornerstone > Settings > Custom CSS

.entry-content iframe {
   max-width:560px;
   display:block;
   margin:0 auto;
}

Hope that helps.

[MatthieuDelageParticipant]

Hi, thank you for your answer. However it seems you are talking about the video sections, which work fine on mobile (except if they were not fitted on your mobile screen, in which case it means it depends on the mobile, and I do have to fix this).

My problem is with the blue bars that have text in it. The text goes out of the mobile screen.

Do you know how I could fix this?

[ThaiModerator]

Hi There,

Please add the following CSS instead:

@media (max-width: 767px){
    .home #x-section-1, 
    .home #x-section-8 {
        margin-left: 0 !important;
        width: 100%;
        white-space: pre-wrap;
    }
    
    .home #x-section-1 .h-custom-headline, 
    .home #x-section-8 .h-custom-headline {
        margin: 0;
    }

    .home .entry-wrap > .x-container.max.width {
        width: 100%;
        max-width: 100%;
    }
}

Hope it helps 🙂

[MatthieuDelageParticipant]

Thanks, it does help, but now there is a huge blue space under and above the text in each of the blue bars (on mobile version only).

And the text of the second blue bar doesn’t fit the screen anymore on desktop version. I don’t think that was the case before.

How can I solve these 2 issues?

Thanks

[Nabeel AModerator]

Hi again,

Please replace this code:

.home #x-section-1, 
.home #x-section-8 {
    margin-left: 0 !important;
    width: 100%;
    white-space: pre-wrap;
}

With this:

.home #x-section-1, .home #x-section-8 {
    width: 100%;
    white-space: normal;
    padding: 10px 0 !important;
    margin: 0 !important;
}

And add the following code in your Customizer:

.home #x-section-1, .home #x-section-8 {
    white-space: normal !important;
}

Let us know how this goes!

[MatthieuDelageParticipant]

Thank you, it works!

However, 2 issues remain:

1) On mobile version (Android), the “?” at the end of the first sentence of section (“Vous souhaitez que votre enfant puisse communiquer sans problème dans la langue la plus parlée au monde ?”) is on a separate line. I’d like to slightly reduce font size only on mobile version. How can I do this?

2) The second and third videos don’t appear on the mobile version (Android). There is just a white space with nothing on it. I don’t know if that problem is related to the previous one. Can you help me fix this?

Thank you!

[LelyModerator]

Hello Matthieu,

1.) Please add this custom CSS too:

@media (max-width:480px){
.home #x-section-2 .x-text p {
    font-size: .8em; /*Adjust this accordingly*/
}
}

2.) This is because of your 200px margin on the section where this videos are located. Those 200px on mobile screen is more than the entire width of the screen, thus there’s no more space to display the video. We need to reset those margin to zero on mobile view. Add reset-mobile-margin on those section class field. Then add the following CSS too:

@media (max-width:480px){
.reset-mobile-margin {
    margin:0 !important;
}
}

Hope this helps.

[MatthieuDelageParticipant]

None of the solutions for both problems worked, sorry!

[Rue NelModerator]

Hello There,

Thanks for updating in!

#1] The code should have work. It should look like this: http://prntscr.com/eqzh5s
Did you removed it already? Please put the code back because we could not see it on the page.

#2] The code did not work because there is a conflict with the code right above. Please check out the image below.

Please let us know how it goes.

[Author]

Posts