WordPress.org

Ready to get started?Download WordPress

Forums

Parabola
Parabola not formatting on iPhone (12 posts)

  1. TheRealPapa
    Member
    Posted 10 months ago #

    Hi all, I am having issues with getting the responsive side of the Parabola template working on an iPhone. This is my first site using WP and I must say I am astounded as to how good this product is! And the Parabola template is AWESOME, so great work CryoutCreations!!!!

    Essentially what I am trying to achieve is the same layout as the home page with the 4 columns under the slider but as a secondary page under some static text. So when viewed on an iPhone it will format in the same nice way as the home page.

    How do I get the 4 column layout from the home page into another page?

    I have tried laying out the HTML in the same way (same IDs and classes) but it has not worked. See page here http://networkfx.com.au/marketing/

    How I want it to lay out in browser is like this: http://networkfx.com.au/technology/ but in this case the iPhone formatting is screwed up.

    Thank you in advance for your help!

  2. Sam
    Member
    Posted 10 months ago #

  3. Sam
    Member
    Posted 10 months ago #

    Sorry I seem to have messed up the link to your stylesheet, I was trying to paste this link http://networkfx.com.au/wp-content/themes/parabola/styles/style-frontpage.css?ver=3.7.1

  4. TheRealPapa
    Member
    Posted 10 months ago #

    Hi Sam,
    Nice photo! Wish I was fishing right now too! Thanks for the reply. You are right, PHP is new to me, JS and HTML / CSS I can work around!

    So if I understand what you said, essentially I need to add a reference to the stylesheet in my page? If so, where do I find the reference to the stylesheet so I can see how it is called in (as in which folder it comes from)? I have looked at header.php (in wp-content/themes/parabola) but I cannot find the line of code you point out above...

    I am very grateful for you taking the time to spoon feed this newbie!

  5. TheRealPapa
    Member
    Posted 10 months ago #

    Hi Sam,
    I "hacked in" the stylesheet so I think I am on my way. Thanks for the suggestion although still not quite working...

  6. Sam
    Member
    Posted 10 months ago #

    No worries. I can also see css being added directly on the home page which isn't being added into the other pages - sorry I missed this earlier, I'd assumed all the css would have been on the stylesheet. Looking very quickly I'd guess the below is not being added to your pages only to the home page.

    <style type="text/css"> .slider-wrapper { max-width: 1050px ; } #slider{ max-width: 1036px ; height: 336px ; border:7px solid #111; } #front-text1 h1, #front-text2 h1{ color: #AA0000; } #front-columns > div { width: 23.5%; } #front-columns > div#column4 { margin-right: 0; } .column-image img { height:110px;} .nivo-caption { background-color: rgba(17,17,17,0.7); } .nivo-caption, .nivo-caption a { color: #CCC; } .theme-default .nivoSlider { background-color: #111; } .theme-default .nivo-controlNav:before, .theme-default .nivo-controlNav:after { border-top-color:#111; } .theme-default .nivo-controlNav { background-color:#111; } .slider-bullets .nivo-controlNav a { background-color: #222; } .slider-bullets .nivo-controlNav a:hover { background-color: #222; } .slider-bullets .nivo-controlNav a.active {background-color: #AA0000; } .slider-numbers .nivo-controlNav a { color:#222; background-color:#222;} .slider-numbers .nivo-controlNav a:hover { color: #222; background-color:#111 } .slider-numbers .nivo-controlNav a.active { color:#AA0000;} .column-image h3{ color: #AAA; background-color: rgba(17,17,17,0.6); } .columnmore { background-color: #222; } .columnmore:before { border-bottom-color: #222; } #front-columns h3.column-header-noimage { background: #111; } </style>

  7. TheRealPapa
    Member
    Posted 10 months ago #

    Hi Sam, thanks again! as you can see from the Marketing page (http://networkfx.com.au/marketing/) I am kind of close, as it formats allright in the browser, but when you shrink the browser or view on iPhone the columns do not re-align top to bottom, but rather it keeps two columns side by side so it shrinks the text and images... I am getting close though, thanks to your help!

    Many thanks!!

  8. Sam
    Member
    Posted 10 months ago #

    There still seems to be differences in the styles being loaded on your home page and the individual pages - it might just be the ordering or there might be some styles missing, it's hard for me to say without reading through all the code.

    Essentially what you need to do is load the same header information on the home page and individual pages to get this to work. I think due to number of different css calls the best way to do this is to remove the if php or move all code within the if statement.

    Unfortunately I'm not familiar with the theme so is hard for me to advise where this if statement might be. If it's not in the header.php file the header.php file likely calls another file which contains this code. It might be worth contacting the theme developer as they'd be able to advise what elements are loaded on the home page and not on individual pages.

  9. TheRealPapa
    Member
    Posted 10 months ago #

    Hi Sam, it seems I am still stuck on why the page locks two columns side by side and not drop every column below each other like the home page. It seems I am missing some more CSS pointing to the colmn ids (column1, column2, etc...) I cannot seem to see this CSS with inspect element on the home page. Not sure if you can see this missing CSS. It is pretty close now, so THANK YOU for all the help!

  10. TheRealPapa
    Member
    Posted 10 months ago #

    Hey Sam, I really appreciate the help! Thanks for the advice! I will contact the theme guys. Thanks!

  11. TheRealPapa
    Member
    Posted 10 months ago #

    Hi Zed, can you help please? I seem to be very close to achieving the result after a few hours invested and Sam's good help.

    Many thanks!

  12. theZedt
    Member
    Posted 9 months ago #

    The presentation page CSS is part of the presentation page only, that's why it's only loaded there and nowhere else.

    Beside the style-frontpage.css contents, there's more styling present in the style-mobile.css file responsible for the frontpage responsiveness on mobile devices; this one is always loaded and applied everywhere where the same HTML markup is present (like your columns clone page);

    The "2 columns switch" is normal behaviour for the responsiveness of the column and is part of the theme.
    If you want it disabled on your cloned columns, you'll need to duplicate all the CSS styling from style-frontpage.css to use different tags and also change the HTML accordingly to use the same tags.
    This way the responsive CSS will no longer apply on your cloned columns.

Reply

You must log in to post.

About this Theme

About this Topic