Responsive top banner and positions

1. How to make "top banner" responsive?
2. How to order "top banner" to be under the logo when viewed through a tablet? or make both on centre.

1.jpg

Could you please post an url to your site?

http://koranopini.com

Your site is a full width site - do you know, if you will force that top banner to be responsive, and if user wil have 1920px wide screen, then this banner will stretch from 728x90 to 1920x237px what is quite huge?
Perhaps you should reconsider your idea?

Im sorry, I just wanted to display banner "matching" in the mobile / ipad.

Could you create some simple mockups of how it should look on desktop, tablet and mobile?

like this...maybe?

Bitmap in Graphic1.jpg

Please edit: /templates/gk_news2/css/override.css and add at its end:

Code: Select all

/*
#------------------------------------------------------------------------
# News II - February Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2013 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */
#ezblog-posts .itemsRow .blog-post {width: 50%;}

TPL_GK_LANG_BACKTOTOP="Back to top"


@media  (max-width: 580px) {
  #gkLogo {   
    width: 100%;
  }
  #gkLogo img {   
    max-width: 100%;
  }
}
@media (max-width: 840px) {
  #gkLogo {
    float: none;
    margin: 25px auto 20px auto !important;
  }
  #gkBannerTop {
    float: none;
    margin: 15px auto !important;
  }
}


Remember to enable "CSS override" in template settings - advanced section.