Title: Implementing plugin shortcode scrambles the page layout
Last modified: August 21, 2016

---

# Implementing plugin shortcode scrambles the page layout

 *  Resolved [Mirta](https://wordpress.org/support/users/mirta/)
 * (@mirta)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/implementing-plugin-shortcode-scrambles-the-page-layout/)
 * Hi Jas, I need your help with the Gwebpro Store Locator plugin integration into
   WordPress page. (I am fine with the integration via php as well, just tell me
   where to put the code :D)
 * I am happy with the level of customizability – I have been able to customize 
   the plugin as desired. However, I am struggling with the plugin integration with
   the rest of the layout – when activating the plugin on the page via the shortcode[
   GwebproStoreLocator], it results in various outcomes, none of which works well
   with the rest of the layout.
 * Here’s the link displaying how I want the outcome to look like:
    [https://dytest.assetdedication.com/find-an-advisor/](https://dytest.assetdedication.com/find-an-advisor/)(
   There is a security certificate warning displayed due to SSL – please ignore 
   the warning and continue to the page.)
 * This is the page with the similar plugin integrated. (Please ignore the plugin
   itself, just pay the attention on how it integrated with the rest of the page.)
   –
   The page displays h1 heading with the grey background (full-width header), followed
   by the plugin area, followed by the footer at the bottom. – The plugin area fits
   the whole space between the two margins. – The margins of the plugin area are
   lined up with the left and right margins of the main header and the footer at
   the bottom.
 * The site is built on Divi 1.9.1 theme by Elegant Themes and WordPress 3.9.1
 * Here are the two outcomes after plugin integration:
    1) Here is the layout after
   the Gwebpro plugin shortcode [GwebproStoreLocator] is copied to the Divi Theme
   page builder by simply replacing the previous plugin shortcode: [https://dytest.assetdedication.com/find-an-advisor-5/](https://dytest.assetdedication.com/find-an-advisor-5/)
 * – the heading with ‘Find an Asset Dedication Advisor'(grey stripe) is pushed 
   to the bottom, below the plugin content area;
    – the plugin content area (inner_lsb,
   containted in inner_wrap) is positioned on the top left (below the top header
   with identity at main navigation), right after the <script> tag, instead of below
   the h1 heading (<div class=”et_pb_section et_pb_fullwidth_section” style=”background-
   color:#808285;”> <section class=”et_pb_fullwidth_header et_pb_bg_layout_dark 
   et_pb_text_align_left”>) You will notice, that in the html of that page, plugin
   area container comes before the header/section container instead of after. – 
   the plugin area (front-end, map, search results) is lined up with the viewport
   margin, instead of lining up with left and right margins of the main navigation
   and footer at the bottom (as displayed on the [https://dytest.assetdedication.com/find-an-advisor/](https://dytest.assetdedication.com/find-an-advisor/)
   page); – the right margin of the map is too far away from the right margin – 
   after the plugin area is aligned to the left, and lined up to match the identity
   and bottom footer left margins, the map width should extend to the rest of the
   page, ie. its right margin should be lined up with the right margins of the main
   navigation and bottom footer.
 * 2) Here is the layout after the page is created by adding the new page via standard
   WordPress page builder:
    [https://dytest.assetdedication.com/find-an-advisor-gwebpro/](https://dytest.assetdedication.com/find-an-advisor-gwebpro/)
 * Here, the plugin seemingly fits relatively well with the rest of the margins 
   of the page. However,
    – the headline needs to be adjusted to display the white
   text on the grey background, full width, like on the [https://dytest.assetdedication.com/find-an-advisor/](https://dytest.assetdedication.com/find-an-advisor/)
   page – right sidebar needs to be removed, so the plugin would take up the whole
   width within the margins – right now, when the sidebar is hidden or display set
   to none, the plugin area is not expanded, and the map keeps the same width (even
   if it is set to 100% in the Store Locator settings).
 * Can you help me with this, so the plugin would fit nicely with the rest of the
   page layout? Whether you can help me by solving option 1) or 2), or providing
   me with the php code, I will be fine, as long as the final outcome is as on the
   [https://dytest.assetdedication.com/find-an-advisor/](https://dytest.assetdedication.com/find-an-advisor/)
   so I can ultimately copy the code to that page, mark this task as finished, and
   leave you a review for the code.
 * Thanks very much!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [Mirta](https://wordpress.org/support/users/mirta/)
 * (@mirta)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/implementing-plugin-shortcode-scrambles-the-page-layout/#post-4973041)
 * I have resolved the issue, with a help of my friends. Here is what worked:
    store-
   style.css /* Make room for the heading h1, so it is positioned like other headings
   on the site */ #main-content #post-2942.post-2942 .entry-content .et_pb_fullwidth_section{
   padding: 0; position: absolute; top: 119px; width: 100%; } /* position the heading
   h1 and the grey bar below the main nav */
 * #main-content #post-2942.post-2942 .entry-content .inner_wrap {
    width: 1080px;/*
   make the plugin content aligned with the main nav, h1, and the footer */ margin:
   0 auto; position: relative; padding-top: 225px; /* position the plugin content
   below the heading h1 */ }
 * /* Make the map full-width within the container and on the page, but aligned 
   with the header, h1, and the footer */
    #map_canvas { width: 100%; }
 * For Responsive:
    /*——————-*/ /* Responsive styles */ /*——————-*/ /*——————-[1100px
   and higher]——————*/ [@media](https://wordpress.org/support/users/media/) only
   screen and (min-width: 1100px) { /*——————-[1100px]——————*/ #main-content #post-
   2942.post-2942 .entry-content .inner_wrap { width: 1080px; margin: 0 auto; } }
 * /*——————-[980px]——————*/
    [@media](https://wordpress.org/support/users/media/)
   only screen and (min-width: 980px) and (max-width: 1099px) { /*——————-[1100px]——————*/#
   main-content #post-2942.post-2942 .entry-content .inner_wrap { width: 960px; 
   margin: 0 auto; } }
 * /*——————-[980px]——————*/
    [@media](https://wordpress.org/support/users/media/)
   only screen and (min-width: 690px) and (max-width: 979px) { /*——————-[980px]——————*/#
   main-content #post-2942.post-2942 .entry-content .inner_wrap { width: 690px; 
   margin: 0 auto; } }
 * /*——————-[480px]——————*/
    /* For small tablets and phablets with width between
   481 and 767 */ [@media](https://wordpress.org/support/users/media/) only screen
   and (max-width: 767px) { /*——————-[480px]——————*/ #main-content #post-2942.post-
   2942 .entry-content .inner_wrap { width: 400px; margin: 0 auto; } }
 * /* For iPhones */
    /*——————-[320px]——————*/ [@media](https://wordpress.org/support/users/media/)
   only screen and (max-width: 479px) { #main-content #post-2942.post-2942 .entry-
   content .inner_wrap { width: 270px; margin: 0 auto; } }
 * The plugin should have integrate itself ‘in the sandwich’ between the h1 heading
   and footer, while in reality. In reality, its html was injected before the main
   content and the containers with the heading and the footer. On the page, it was
   displayed as container with the plugin content (inner_wrap) being positioned 
   outside the rest of the layout, at the top left in the main content area, below
   the main nav, with h1 heading and main footer stacked at the bottom.
 * I am not sure whether the issue was related to the plugin or the theme, so I 
   targeted the code to the plugin page only.
 * In overall, I love how the customizability of the plugin, an I would give it 
   a 5-star review. However, the plugin integration gave me a lot of headache (while
   it should have been ‘plug and play’) and I lost a good deal of time trying to
   resolve it. Whether it is the theme or the plugin itself (other similar plugins
   didn’t have such issues with the same theme), I needed a support asap, but I 
   didn’t receive it yet 🙁
 *  Plugin Author [Jas Saran](https://wordpress.org/support/users/moonheart/)
 * (@moonheart)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/implementing-plugin-shortcode-scrambles-the-page-layout/#post-4973096)
 * Hello Mirta,
 * Gwebpro Store Locator is a free plugin with GPLv2 license. So anyone can customize
   it as he want. You have also customized our plugin for your website need. And
   we do not provide free Technical Support for customizing our plugin. This service
   is chargeable.
 * So when you are customizing our plugin we can not provide you general support.
   You have to contact our technical support on [support@gwebpro.com](https://wordpress.org/support/topic/implementing-plugin-shortcode-scrambles-the-page-layout/support@gwebpro.com?output_format=md).
 * Thanks
    Team G Web Pro

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Implementing plugin shortcode scrambles the page layout’ is closed to
new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/gwebpro-store-locator_c2bfac.svg)
 * [G Web Pro Store Locator](https://wordpress.org/plugins/gwebpro-store-locator/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gwebpro-store-locator/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gwebpro-store-locator/)
 * [Active Topics](https://wordpress.org/support/plugin/gwebpro-store-locator/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gwebpro-store-locator/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gwebpro-store-locator/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [Jas Saran](https://wordpress.org/support/users/moonheart/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/implementing-plugin-shortcode-scrambles-the-page-layout/#post-4973096)
 * Status: resolved