Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 9, 2014 at 8:34 pm #276607
    ruthnapal

    Hi there! I’m finishing off a website and there are four things left to improve before the site is ready, I’d be really grateful for some advice on the following please…

    In reference to Wiser Property: http://wiserproperty.com/

    1. I’d like to make all H1 and H2 headings shrink to respond to tablets and smartphones – as currently the titles appear really large on smaller screens. Any idea what CSS I would require for this please?
    2. On the “Sell Your Home” and “PIG (Plymouth Investment Group)” sections, I have made the font size larger. As a result, the bottom of some words are cut off, notably the g and y’s. What CSS would be required so they wouldn’t be cut off?

    The next too aren’t really important, but if it’s a quick fix, then great!…

    3. At the bottom of the “PIG” section I’ve included a Google Map. Up until recently, landmarks were listed, and were clickable – so – a hotel near the pin could be clicked which would bring up an info box, which in turn could turn the whole map into Street View. Is there an option I’ve missed, or has this functionality been removed from the Google Maps integration?
    4. Is there any way to remove the tooltips that appear when you hover over images, without needing to remove the alt text?

    Thanks a lot for your help, it’s really appreciated! :-)

    Andreas

    June 10, 2014 at 5:18 am #276839
    Ismael

    Hey atlantio!

    Thank you for using the theme!

    1.) First, try this on Quick CSS or custom.css to resize the heading tags:

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #top #wrap_all .header_color h1, #top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .footer_color h1, #top #wrap_all .socket_color h1 {
	  font-size: 3em;
  }
  
  #top #wrap_all .header_color h2, #top #wrap_all .main_color h2, #top #wrap_all .alternate_color h2, #top #wrap_all .footer_color h2, #top #wrap_all .socket_color h2 {
	  font-size: 2em;
  }
}

    2.) Do you mind providing a screenshot of this issue? It looks fine on Chrome Windows 8.

    3.) Unfortunately, those features has been remove on the Maps element within the theme. You might need to use a more complex google maps plugin for this particular issue. https://wordpress.org/plugins/wp-google-maps/

    4.) Use this on Quick CSS or custom.css:

    .avia-tooltip {
display: none !important;
opacity: 0 !important;
}

    Best regards,
    Ismael

    June 10, 2014 at 7:55 am #276882
    ruthnapal

    Hi Ismael,

    Thanks a lot for your help, I tried the CSS to make the headings more responsive and it worked a charm!

    As for 2) – the clipping at the bottom of Icon Box titles – this is an example of where clipping occurs: http://www.dropbox.com/s/mc5ly7m756mj6x6/Clipped%20titles%20at%20bottom.jpg

    As for the tooltips appearing on hover, I tried the code and they still appear for some reason. Any ideas? http://www.dropbox.com/s/66f35548obo0r70/Tooltip%20on%20hover.png

    Thanks for the Google Maps suggestion, I checked the plugin out and the colour saturation of maps options don’t appear present as in the Maps element within the theme, but this isn’t an issue, I can always wait and see if the extra functionality is re-added in the future, no worries if it’s not!

    One final question if it’s an easy solution, I’ve used background images for “Mentoring” and “About” – the aeroplane in “Mentoring” has a @2x graphic and I have the WP Retina 2X enabled which should swap out the graphics. I’ve experimented and the retina graphics don’t appear to be working, making the texture in the “PIG” section appear a bit fuzzy. Am I missing something obvious here?

    Thanks a lot for all your help, have a lovely day :-)

    Andreas

    June 13, 2014 at 5:26 pm #278631
    Devin

    Hi!

    For the icon box clipping you need to increase the line height for those elements to go along with your font size. Adjust your css like this:

    
h3.iconbox_content_title {
font-size: 20px !important;
font-weight: 700;
line-height: 25px;
}

    For the alt text, see; https://kriesi.at/support/topic/how-to-remove-tooltips/#post-224464

    I’ve not played with anything that forces retina support locally but the best way to debug would be to check your css and then check it on a native device that support retina. Its not ideal but unless you know for sure the implementation for testing already works that is what I would do.

    Regards,
    Devin

    June 14, 2014 at 2:42 pm #278874
    ruthnapal

    Devin, Ismael, thank you both very much, Your suggestions worked a charm!

    Wishing you both a lovely weekend :-)

    Andreas

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Responsive headings + Google Maps’ is closed to new replies.