[JohnnyBeGoodParticipant]

Hi,

When I view my contact page on the desktop browser everything is visible but as soon as try to view it on my physical mobile phone the on of .com email address gets cut off.
I’ve tried to use [clear] http://demo.theme.co/icon-1/shortcodes/clear/ short code but as soon as I wrap it around my email it completely disappears.

[JohnnyBeGoodParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-feature-box-content {
    word-break: break-all;
}

Hope it helps 🙂

[JohnnyBeGoodParticipant]

Hi Thai,

That sort of worked. What I would like to keep entire email on one line.
Do you have any other solution to be able to include icon next to email and phone but to put everything on separate lines?
I know its possible because IF I create it without Cornerstone it works.

[JoaoModerator]

Hi There,

I believe, considering the size of your icons on the right, you could easily divide your columns in 2/3+1/3 instead of 1/2 + 1/2

I guess will look great and you will be able to fit your whole email without reducing the font.

Hope it helps

Joao

[JohnnyBeGoodParticipant]

Hi,

I did change it to 2/3+1/3 but it did not make any difference. I added solid border just to see what its doing and as you see on left and right side there’s 1/4 of empty space. Why does it not go all the way to the edges? That should give plenty of room.

[JohnnyBeGoodParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Since email has no space it consider as one word. You have two options :

#1 Break the word on specific screen size :

@media (max-width:480px){
p.x-feature-box-text > span {
   word-break: break-all;
}
}

#2 Decrease font size :

@media (max-width:480px){
p.x-feature-box-text > span {
    font-size: 10px;
}
}

Hope it helps

[JohnnyBeGoodParticipant]

1. That won’t work because email needs to be in one line and not broken down.
2. Reducing the font size makes it really hard to read.

I made a new page and this time did not use Cornerstone and email goes from left to right and fills up all usable space and that’s with even bigger font Heading 4!. I need to have same effect using Cornerstone and problem will be solved. Something keeps it inside that box and I need it to be expanded beyond that box.

[JohnnyBeGoodParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

This code will remove default margin of the container:

.page-id-7 #x-section-1 .x-container.width {
    width: 100%;
}

Although this will get rid of the default margin, the email address still seems to be to long and would overflow to the space in the page.

Perhaps you want to move the icons on the top of the text to give more space. If you are okay with that, kindly add this CSS in the customizer:

@media (max-width: 480px) {
    .page-id-7 #x-section-1 .x-feature-box .x-feature-box-graphic {
            display: inline-block !important;
            width: 100%;
    }

    .page-id-7 #x-section-1 .x-feature-box .x-feature-box-graphic-outer {
        margin-right: 0 !important;
        text-align: center;
    }

    .page-id-7 #x-section-1 .x-feature-box-graphic-inner {
        margin: 0 auto;
    }    
}

Hope this helps.

[JohnnyBeGoodParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

I have removed the screenshot as per request.

Cheers!

[JohnnyBeGoodParticipant]

Thanks Jade!

[JohnnyBeGoodParticipant]

I started all over and after various margin adjustments using Cornerstone I ended up not needing any custom CSS.
I still appreciate your help!

[Author]

Posts