Parabola not formatting on iPhone

Hi TheRealPapa

Quickly looking I can see that the pages don’t load the same stylesheets as the front page – it looks like the stylesheet missing from the pages is

This is probably controlled via the themes header.php file. Look for a bit of code which says something like the below

<?php if( is_front_page() ) : ?>

If you’re not familiar with php it might be easier to simply move the css line above the if statement – remember to take a backup before changing anything in case you need to restore.

Hope this helps

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

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!

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

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>

Hi Sam, thanks again! as you can see from the Marketing page (https://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!!

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.

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!

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

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!

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.