Oxygen homepage doesn't fit in mobile view

lasaladeitanti · Member · Sep 3, 2014 at 10:58 pm
Copy link

Add topic to favorites
Hi!
I made a little bit of work around css in our website based on Oxygen theme: http://lasaladeitanti.org

I’m really satisfied on how it works when seen through desktop devices, but something goes wrong in the mobile view.
When reaching the site through a smartphone the homepage blows up.
The main problem concerns the featured news: they all squeeze to the left as if something doesn’t allow them to take full width in the page.

This doesn’t happen in posts and pages, with some exception: see for example lasaladeitanti.org/prenotazioni/ where the upper half of the page squeeze to the left while the subscription form in the lower half fits regularly the whole width (this maybe depends on tables?).

Any help GREATLY appreciated.

Tx from Italy

The blog I need help with is: (visible only to logged in users)
lasaladeitanti · Member · Sep 3, 2014 at 11:01 pm
Copy link
The system automatically inserts I need help for this blog: lasaladeitanti.wordpress.com

That’s not true.
I’m talking about another blog: lasaladeitanti.org

Tx
hallluke · Member · Sep 4, 2014 at 6:40 am
Copy link
I can’t go through all your custom CSS to check everything but if you target just the homepage at mobile size you can fix the issue so that it fills the whole width:
```
@media only screen and (max-width:767px){
  .home #main #content {margin-right:0;}
}
```
As for the contact form, it looks like you’re using tables unnecessarily in that post and the input elements are hard-coded to be 300px wide. If you don’t want to re-arrange the contact form area then you can reduce them using this code (although it’s far from perfect):
```
.contact-form input[type='text'],
.contact-form input[type='email']{
  width:80%;
}
```
lasaladeitanti · Member · Sep 4, 2014 at 8:03 am
Copy link
@halluke

Now the homepage works perfectly, thanks!

I cannot say the same for the lasaladeitanti.org/prenotazioni/ page.
I inserted your code and cancelled the 300px width for the input elements, but it doesn’t work on mobile view.

And, if it is not off topic, where does the mobile browser point when asked for lasaladeitanti.org?
There are times this url loads the correct homepage with all the features, there are times it loads the “home” page that contains just a welcoming message.

Tx in advance.

Oliviero
hallluke · Member · Sep 4, 2014 at 8:30 am
Copy link
That depends on how your theme is optimised for mobile and if whether you’re using your main theme on mobile or the WordPress default mobile theme.

No items found.