Mobile Screen Issue – 50% width on one page

  • Resolved kls

    (@katiesutton)


    10 years, 10 months ago

    I’ve created a real estate site starting with the Twenty-Eleven theme and everything is looking the way I want it but I’m having one problem on mobile phones (droid and iphone, both the same result): all of the pages look great there EXCEPT when you click through to look at a single available listing the body is suddenly only 50% of the width of the screen and the other half is custom background. This listing page is being generated vis-a-vis the IDX plugin Optima Express (their sales person is absolutely wonderful and has tried very hard to help me, but their techs have told me no, they made no representation that the plugin is responsive and so I’m on my own). Anyway, the page is calling the default template page-id-0. (I used the default template on all of my other pages and they look fine on mobile.) I tried customizing the CSS just for page-id-0 with code like this:.page-id-0 html,body {margin:0;width:480px;} and other similar iterations such as width: 100% but can’t seem to hit on the right css code to fix this — in fact, I’m not sure it can be fixed with css but it seems like it should be fixable. Anyone, wondering if anyone can help! The site is recompanynorwell.com.
    Thanks in advance!

Viewing 10 replies - 1 through 10 (of 10 total)

  • Everything can be fix with CSS, having a look now Katie!

    Look likes your (#primary) is set to 80% width there and it also costing the background issue.

    Add something like:

    #primary {
    margin-top: 1.625em;
    width:100%;
    overflow:hidden;
    }

    In the last part the overflow hidden part will stop that background thing and from there play a bit with the css and you will be able to get it right I think….

    Thread Starter kls

    (@katiesutton)

    Jack Saat, you are an absolute rock star! I still have some css customizing of the IDX fields to make the pages display better, but this 50% business was my biggest issue and I was tearing my hair out trying to figure out how to fix it – that overflow hidden part would have evaded me for sure. THANK YOU!!!

    PS I was not able to target only id-page-0 and so the fix applied to my whole site and I have started tweaking css for rest of site pages, which display a bit differently (nothing tragic) with this fix…I know I can make the site look good this way but I guess while I have your attention, do you know why .page-id-0 #primary {your css;} doesn’t work for me?

    NP, Checking why hold on ??

    .page-id-0 #primary {
    margin-top: 1.625em;
    width:90% !important;
    overflow:hidden;
    margin-left:5%;
    }

    Works for me, some style is overwriting it however so I added the “!important” part so if your code not is working add that but the selector seems to work just fine

    Thread Starter kls

    (@katiesutton)

    Weirdly, it is working for me now too – even without “important-ing” it. Maybe it was cache-ing or something. Thank you so much, Jack, you are my hero. Have a great night (or day or whatever it is where you are right now ??

    Yeah cache is a pain sometimes, If you need something else let me know. It’s 1:37AM here now lol so Good night is correct same to you! ??

    Hey Katie,

    I was looking at your other issue and found out that someone created a child theme for your optima-express plugin! It’s called IDX STYLER you can download it FREE here: https://themes.agentevolution.com/idx-styler/

    I don’t know of it will work for you but it make help you same take some styles from it.

    Thread Starter kls

    (@katiesutton)

    Thanks – it looks like I might need to have started with one of the Agent Evolution themes vs. Twenty-Eleven to use this but maybe next time ?? Anyway, using Twenty-Eleven was a good education, as this was my first WP website.

    Again, thank you very much for your help – this was a big problem and you saved me hours of trying to figure it out!

    Your doing a great job! The site looks really good and way better them the Twenty-Eleven! And maybe you still can ‘steal’ some html/css of that plugin to help you.

    And no problem at all!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Mobile Screen Issue – 50% width on one page’ is closed to new replies.