Thank you so much Josue, you are a star! Awesome!
2 issues except for the main menu were fixed. I have Active and hover as white for the menu items, which is fine, but even after deploying the script, the inactive state is still grey, and I wanted to change the grey to another colour. I havent worked out what colour but maybe an orange to match my theme.

I have to tell you this site is not for me, it is for my client, Robyn and she wants me to change the contact form input fields to white, with black text, so that it looks like a standard form easier to see. Can you give me a quick css for that: where do I put it:in the same place as the other quick CSS?
http://www.robynhaakercounselling.co.nz/wp/contact/.

On the contact form, I was unable to load a google map. Can you direct me to the page where I can get a tutorial, perhaps a video too, on how to set up a map? Thankyou.

In the bookings page, I have utilised a promo box, because my client has services to sell, and your promo box is looking really nice to display.
She wants to use your buttons – to action the book now function, which takes the user to a pop up box for gettimely.com booking system. This system has options to use their buttons; any other button, or one of my own design. in other words they have something for each situation, but not for using your promobox fields…..
I want to isolate or replicate your book now button; create a graphic, and put the gettimely script somewhere, and substitute their button for yours:

<script id=”timelyScript” src=”https://book.gettimely.com/widget/book-button.js”></script&gt;
<script id=”cat2477″>var button1 = new timelyButton(“robynhaaker”, { buttonId: “cat2477”, category: 2477 });</script>

Sorry one more thing; Robyn says that this website has no navigation main menu bar when viewing in an IPAD. She wants me get this fixed, and to put another copy of the main menu in the footer, perhaps in the middle column. Could you please advise me how to do this, as well as the other points above?
Thanks
Gillian

Hi Yigit,

Sure! I have a attached 3 screenshots for you:

1.
2.
3.
4.
5.

1. For all browsers in normal size, the result is a header which is vertical above the first column (try resizing to small and back again to “normal” size)
2. Resized to a resolution of iPhone size in Firefox. The first two cells and the last one (columns of the row) do not have a header text in small letters above the content. Then the 3rd cell has a header text: “Symptomen” in small font above: 3:00-05:00. This is however not the header of the 3rd column. This should be “Optimale tijd”
3. Resized to a resolution of iPhone size in Safari or Chrome, results in the same make-up.
4. Screenshot from an iPhone in Safari browser. Notice that there is no header and there is the header text in the first 3 of the 4 columns (cells), but these are displaced again. So “Olie” above: “Long”, should be Meridiaan, etc. (so they are misplaced by one)
5. Screenshot from an iPhone in Safari browser. This is the same as 2. and 3.

So there are changes in the different browsers….

Hope this helps :-)

Kind regards,

Dave

I already tried the following code. This works, except for the color.

.template-page .entry-content h1, .template-page .entry-content h2 { text-transform: none;
}
h1 {
font-size: 16px;
color: #214776;
line-height: 1.0em;
margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}

Got it. Thanks! One more: How can I reduce the size of the light grey icon content box under the icon (DIV.iconbox_content)?
http://nexuscontentlab.com/home/ Thanks!

ah that’s awesome, sorry I didn’t realise that. Works much better now.

One last question, how would I make the font smaller or not even visible just for mobile phones as the captions pretty much covers the image when viewed on a phone, thank you (not ipads this size will be fine)

I tried adding
.avia-caption-title h2 {
font-size: 10px;
}

but didn’t work, my knowledge is limited on this sorry, cheers

Hey Devin,

I’ve gone ahead and deactivated respond.js and the theme is updated to 2.3.2.

After removing respond.js, obviously the website is no longer responsive in IE, so the squished blog image issue goes away. But naturally I would prefer it to remain responsive, so hopefully there’s a way to fix that aspect of the plug-in’s functionality.

The other remaining issues are:

– Menu disappears at certain smaller sizes
– Search icon renders as a square until moused-over (I would be happy with simply switching out the font search icon with an image if you can show me how)
– Recent Post images don’t fill their container boxes correctly

Thanks for the help!
Tom

• This reply was modified 12 years, 6 months ago by tmunz.

Hi Yigit,

That didn’t work for me. The header is now displayed on top of each other and not above the columns in normal view.
When resizing to the size of the iPhone, there is still the problem with the headers in small above the cell content. Only one column has the header in small font above the content and that is column 3, but it has the header of column 4

Thanks,

Dave

Hi Yigit! Thanks for your quick reply. Unfortunately that didn’t work. Any ideas? Here’s what I have under the custom css box. Maybe there’s something blocking it from working?

.content { padding-top: 10px; }
#top .title_container .container { padding: 0; min-height: 36px; }
.social_header .phone-info span { font-size: 18px; }
#header_main .container { height: 150px!important; line-height:150px!important; }
.social_header .main_menu ul:first-child > li a { height: 90px; }
.iphorm-element-spacer { padding-bottom: 0; }
#header_meta { display: none; }
.logo img { padding: 15px 0; }
.main_menu { top: 11%; }

#top #menu-item-search { display: none; }
.main_menu ul:first-child > li > a { font-size: 15px; }
.sidebar { padding-top: 25px; }
h3.widgettitle { font-size: 15px; color: #2a3032; }
.widget_nav_menu a { font-size: 14px!important; color: #2a3032 !important; }
#top .widget_nav_menu ul ul li a { padding: 2px 0px 3px 12px; }
.main_color strong { color: #333333; }

.header_color .main_menu ul:first-child > li > a, h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif !important; }
.widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6 { text-transform:capitalize!important; }
.widget a, .widget p { color: #333333 !important; }

.main_color h3.widgettitle { font-weight: bold; color: #ce1433; }

.widgettitle { font-size: 24px; }

Still the same….

div.main_menu { position: absolute; right: 34.5%; top: 57%; }
strong.logo { left: 40%; }
#header_main { padding-bottom: 34px; }
.fixed_header.social_header #main { padding-top: 181px; }
.current-menu-item>a>.avia-menu-fx { display: none;}
li:hover .avia-menu-fx { display: none; }
.main_menu .menu ul { margin-top: -32px; }
body { font-size: 14px !important; }

Hi Ismael,

thanks for answering.

thats the code i put in… But the menu is still on the right.

body { font-size: 14px !important; }
strong.logo { left: 40%; }
#header_main { padding-bottom: 34px; }
.current-menu-item>a>.avia-menu-fx { display: none;}
div.main_menu { right: 34.5%; top: 57%; }