How to optimise homepage for mobile

Support
#1

How do I optimise my homepage for mobile? The rest of my website appears to be ok.

https://diytravelhq.com

Also I don’t have a menu on mobile…

My homepage is a page I created with X-Theme. I’m happy with how it looks on my MacBook Air but the layout is not right on my Android. I have no idea how it appears on other devices.

Thanks

#2

Hi there,

Please try this:

@media (max-width: 979px) {
    .masthead-stacked .x-btn-navbar {
        color: #333;
    }

    .home .x-anchor-button {
        font-size: 0.7em !important;
    }

    .home .x-anchor-button span {
        padding: 5px 3px !important;
        margin-top: 5px;
    }

    .home .x-grey-img {
        margin-bottom: 30px !important;
    }
    
}
#3

Perfect, thanks!

How can I optimise my homepage for mobile so the layout displays correctly?

#4

Hi there,

Would you mind clarifying what is not displaying correctly on the homepage on mobile?

I’ve checked it and the spacing issues on mobile seems to be addressed in the previous code provided.

#5

Hi, here are some of the issues I am still seeing (viewed on different mobiles, cache cleared):

  1. “Helping you travel” is cut off at the sides:

  1. Photo is off-centre & no space before “Who we are”:

  1. Social icons and “Adventures” are not centred:
#6

Hi There,

Thanks for the clarification!

Please use this CSS to make the home page mobile friendly!

@media (max-width: 600px) {
.e12137-4.x-text .x-text-content-text-primary {
   padding: 20px 40px;
   font-size: 1.5em;
   line-height: 1.3;
}
.e12137-5.x-text {
  font-size: 1.5 em;
}
.e12137-18.x-image {
 width: auto !important;
}
.e12137-19 {
 text-align: center;
}
}

Hope this helps!

Thanks

#7

Thanks so much!

I’m still having a few issues…

  1. Can I have a space between the image & “Who We Are”?

  1. Can the grey square border around the Facebook icon be removed?

  2. Can the 4 social media icons be on the 1 row?

  3. Can “Adventures” be centred?

Thanks in advance for any assistance!

#8

Hi There,

Please use following CSS in your Theme option-> global CSS.

@media (max-width: 600px) {
   .e12137-19 {
  padding-top: 30px;
}
.e12137-25.x-anchor {
 box-shadow: none;
}
.e12137-26.x-anchor .x-graphic-icon {
 font-size: 2em !important;
}
.e12137-35 .h-custom-headline {
font-size: 20px !important;
}
}

Hope this helps!

Thanks

#9

Thanks!

  1. The social icons are still not displaying correctly on 1 line

  2. Can I keep the previous larger font size of “Adventures” (so it’s the same as the rest of the headers my homepage), I would just like to centre the font

This is the CSS I currently have (based on previous suggestions):

}
@media (max-width: 600px) {
.e12137-4.x-text .x-text-content-text-primary {
padding: 20px 40px;
font-size: 1.5em;
line-height: 1.3;
}
.e12137-5.x-text {
font-size: 1.5 em;
}
.e12137-18.x-image {
width: auto !important;
}
.e12137-19 {
text-align: center;
}
}
@media (max-width: 600px) {
.e12137-19 {
padding-top: 30px;
}
.e12137-25.x-anchor {
box-shadow: none;
}
.e12137-26.x-anchor .x-graphic-icon {
font-size: 2em !important;
}
.e12137-35 .h-custom-headline {
font-size: 20px !important;
}

#10

Hi there,

Do you wish to make the icons responsive? Because it will really going to break into multiple rows since the size remain big but device width is getting small. If yes, please add this CSS as well


 .home   .e12137-19.x-column .x-icon {
font-size: calc(14px + 5vw) !important;
}

As for that headline, please remove this CSS

.e12137-35 .h-custom-headline {
    font-size: 20px !important;
}

then add this as well

.e12137-35 .h-custom-headline {
    font-size: calc(20px + 5vw);
}

Thanks!

#11

Thanks!

Ok I will keep the social media icons responsive over 2 rows - how can I make the twitter icon the same size as the rest? (See previous image)

#12

Hi There,

I can see the icons are the same size!

Can you please confirm if the issue still there on your side?

Thanks

#13

It all looks good now, thanks!

Would it be possible to have the social icons across 2 rows - eg. 2 icons per row centred?

#14

hi there,

please use below CSS to make the icons small and it will come in a single row!

@media (max-width: 600px) {
.e12137-25.x-anchor .x-graphic-icon,
.e12137-26.x-anchor .x-graphic-icon,
.e12137-27.x-anchor .x-graphic-icon,
.e12137-28.x-anchor .x-graphic-icon
 {
 font-size: 3em !important;
}
}

Hope this helps!

Thanks

#15

Fantastic!

Can I please have the CSS to have these icons centred?

#16

Hi there.

Sure, please add this

.e12137-19.x-column {
text-align: center;
}

Thanks!

#17

Perfect, thanks so much!

I still have some inconsistent spacing issues on Mobile display.

For example I need a space here between Continents & Where We’ve Been:

And I need the top space here to be the same size as the bottom space:

What coding can I use to adjust spacing? Thank you :slight_smile:

#18

Hi THere,

Not that no code is necessary if you play with certain aspects while building your page.

Paddings and Margins on your Sections Rows and Columns I would suggest setting with % or em instead of px.

You have a gap element in Cornerstone which allows you to hide the element based on screen width which can be used for adjust spacing among the devices.

If any element seems to have too much spacing, click on the element > customize > class and add: man

man stands for margin all none.

Also remember to avoid playing with negative margins as it tends to have a bad impact on mobile.

Remember that every element row column or section on Cornerstone V2 Elements have a customize tab and you can hide the item based on screenwidth which allows you to have multiple items when necessary to adjust mobile.

Hope it helps

Hope it helps

#19

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