Support

Home Forums Event Espresso Premium Alignment issues on mobile devices

Alignment issues on mobile devices

Posted: January 25, 2017 at 5:08 am


Bosworthsgc

January 25, 2017 at 5:08 am

Hi

I am having a few issues with alignment on a mobile device

(Currently testing on a Moto G on Android)

Going to http://www.bosworthsgc.co.uk/coach-trips and selecting for example the Hampton Court Flower Show

The quantity box overshoots the side of the page

Also the title doesnt sit correctly

Not sure if this is something you can help with or if I need to refer this back to the theme developer but any help you can offer would be appreciated

Thanks


Tony

  • Support Staff

January 25, 2017 at 11:47 am

Hi there

The theme is setting the width of the select box to 320px wide – http://take.ms/j9rpl

On smaller screens it stays that size.
You can either change that select box width to auto for all screensizes:

.ticket-selector-tbl-qty-slct {
    width: auto;
}

Or use a media query to set it only for small screens:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

.ticket-selector-tbl-qty-slct {
    width: auto;
}

}

I can’t see a problem with the title?


Bosworthsgc

January 26, 2017 at 2:48 am

Thank you – using the media query worked perfect

for the title issue I have taken a screen shot on my android moto g

Moto G screenshot of event


Bosworthsgc

January 26, 2017 at 2:48 am

Moto G Screenshot


Bosworthsgc

January 26, 2017 at 2:49 am

As you can see the title is having letters dropped to the next line . It looks like this is because of the upcoming icon on the page

Thanks


Josh

  • Support Staff

January 26, 2017 at 10:42 am

You can add and make adjustments to this bit of CSS to help with the word-wrap:

@media (max-width: 500px) {
.single-espresso_events .title-header {
font-size:2em;
}

}


Bosworthsgc

January 27, 2017 at 2:08 am

Great – thanks Josh

The support post ‘Alignment issues on mobile devices’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Bosworthsgc 2 years, 4 months ago ago

Topic Tags

Notifications

This topic is:
pending
Do NOT follow this link or you will be banned from the site!