[Skip to main content](#vessel-content)

#   hikashop\_notice\_box\_content popup size problem

##

- **[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")**
- [![plengyel's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32723-plengyel "View plengyel's Profile") Topic Author
- [ Offline](/forum/user/32723-plengyel)

Less More

- Posts: 34
- Thank you received: 1
-
-

10 years 9 months ago -  10 years 9 months ago [\#229259](#229259) by [plengyel](/forum/user/32723-plengyel "View plengyel's Profile")  *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229259 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")* was created by *[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")*

-- HikaShop version -- : 2.6.1 Business
-- Joomla version -- : 3.4.8
-- PHP version -- : 5.3.27
-- Browser(s) name and version -- : Chrome 48.0.2564.103m
-- Error-message(debug-mod must be tuned on) -- :

Hi,
Could you please help me, how I can set the size of the "hikashop_notice_box_content" popup.
In desktop mode it has a correct size, but in mobile view it has always about 100% height.

Attached I send screenshots about the difference.

Thank you in advance for your help.

- [ ![cart&#95;popup&#95;ok.jpg](/forum/attachment/29411) ](/forum/attachment/29411 "cart&#95;popup&#95;ok.jpg") [ ](/forum/attachment/29411?download=1 "cart&#95;popup&#95;ok.jpg")
- [ ![cart&#95;popup&#95;size&#95;problem.jpg](/forum/attachment/29412) ](/forum/attachment/29412 "...ze&#95;problem.jpg") [ ](/forum/attachment/29412?download=1 "...ze&#95;problem.jpg")

Last edit: 10 years 9 months ago by [plengyel](/forum/user/32723-plengyel "View plengyel's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[EnerW](/forum/user/38634-enerw "View EnerW's Profile")**
- [![EnerW's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/38634-enerw "View EnerW's Profile")
- [ Offline](/forum/user/38634-enerw)

Less More

- Posts: 101
- Thank you received: 8
-
-

10 years 9 months ago [\#229268](#229268) by [EnerW](/forum/user/38634-enerw "View EnerW's Profile")  Replied by *[EnerW](/forum/user/38634-enerw "View EnerW's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229268 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

I think that you use Mootools for the Popup mode and that the iframe size is not set in your template or responsive template.

You could try to add the following css to one of those templates:

iframe {
height: auto !important;
width: 100% !important;
}

Or you can switch from Mootools to Vex (see the image)

[ ![Popup&#95;mode.png](/forum/attachment/29413) ](/forum/attachment/29413 "Popup&#95;mode.png")

- [ ![Popup&#95;mode.png](/forum/attachment/29413) ](/forum/attachment/29413 "Popup&#95;mode.png") [ ](/forum/attachment/29413?download=1 "Popup&#95;mode.png")

The following user(s) said Thank You: [plengyel](/forum/user/32723-plengyel "View plengyel's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Jerome](/forum/user/80-jerome "View Jerome's Profile")**
- [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

- Posts: 26400
- Thank you received: 4080
-
- [](http://obsi.dev)
-

10 years 9 months ago [\#229262](#229262) by [Jerome](/forum/user/80-jerome "View Jerome's Profile")  Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229262 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

Hi,

I think that there should have some CSS rules with @media which make the popup "fullscreen" on small screens.
[ www.hikashop.com/support/documentation/1...ize-the-display.html](https://www.hikashop.com/support/documentation/153-customize-the-display.html)

Regards,

---

Jerome - Obsidev.com
HikaMarket &amp; HikaSerial developer / HikaShop core dev team.

The following user(s) said Thank You: [plengyel](/forum/user/32723-plengyel "View plengyel's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")**
- [![plengyel's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32723-plengyel "View plengyel's Profile") Topic Author
- [ Offline](/forum/user/32723-plengyel)

Less More

- Posts: 34
- Thank you received: 1
-
-

10 years 9 months ago [\#229342](#229342) by [plengyel](/forum/user/32723-plengyel "View plengyel's Profile")  Replied by *[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229342 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

Dear Jerome,
Dear EnerW,

Unfortunately the iframe settings or the popup mode switch didn't solve the problem.
I added a max-height setting to modal.css and it is ok now.

Thank you for your help.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[EnerW](/forum/user/38634-enerw "View EnerW's Profile")**
- [![EnerW's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/38634-enerw "View EnerW's Profile")
- [ Offline](/forum/user/38634-enerw)

Less More

- Posts: 101
- Thank you received: 8
-
-

10 years 9 months ago [\#229423](#229423) by [EnerW](/forum/user/38634-enerw "View EnerW's Profile")  Replied by *[EnerW](/forum/user/38634-enerw "View EnerW's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229423 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

Jerome is correct that you should add an @media declaration to the CSS rule, but the change to the modal.css will work as well.

Please note that as soon as there is a change or update you could loose your setting.

Regards, Rene

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")**
- [![plengyel's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32723-plengyel "View plengyel's Profile") Topic Author
- [ Offline](/forum/user/32723-plengyel)

Less More

- Posts: 34
- Thank you received: 1
-
-

10 years 9 months ago [\#229656](#229656) by [plengyel](/forum/user/32723-plengyel "View plengyel's Profile")  Replied by *[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229656 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

Hi EnerW,

Unfortunately the max-height setting in the modal.css cause a problem,
every modal boxes, iframes will be affected.

Thank you, I will test the @media declaration.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[EnerW](/forum/user/38634-enerw "View EnerW's Profile")**
- [![EnerW's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/38634-enerw "View EnerW's Profile")
- [ Offline](/forum/user/38634-enerw)

Less More

- Posts: 101
- Thank you received: 8
-
-

10 years 9 months ago [\#229785](#229785) by [EnerW](/forum/user/38634-enerw "View EnerW's Profile")  Replied by *[EnerW](/forum/user/38634-enerw "View EnerW's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229785 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

Morning,

this is the css I used in my responsive template:

/* give the popup window a responsive size */
/* like the add to cart notification popup*/

@media all and (max-width: 979px){

.body-overlayed &gt; div {
height: auto !important;
width: auto !important;
}
iframe {
width: 100% !important;
height: auto !important;
}
}

If you do test it with Firebug or Chrome you better set the cart popup time temporary to a lager time, just do not forget to set it back again afterwards ![:P](/media/kunena/emoticons/14.png ":P")

Configuration &gt; Main &gt; Cart &gt; Notice popup display time &gt; 500000 ms

This should also cure the image deformation if you use mootools for the Image popup mode in some cases.

Please note that this is working with my template, which is not that fancy or sophisticated.

Rene

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")**
- [![plengyel's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32723-plengyel "View plengyel's Profile") Topic Author
- [ Offline](/forum/user/32723-plengyel)

Less More

- Posts: 34
- Thank you received: 1
-
-

10 years 9 months ago [\#229806](#229806) by [plengyel](/forum/user/32723-plengyel "View plengyel's Profile")  Replied by *[plengyel](/forum/user/32723-plengyel "View plengyel's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229806 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

Dear EnerW,

Thank you ! The cart popup is fine now.

Only two questions. Could we somehow switch back the sbox-overlay around the cart popup,
and position the cart popup to the center of the visible screen?

Thank you in advance.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[EnerW](/forum/user/38634-enerw "View EnerW's Profile")**
- [![EnerW's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/38634-enerw "View EnerW's Profile")
- [ Offline](/forum/user/38634-enerw)

Less More

- Posts: 101
- Thank you received: 8
-
-

10 years 9 months ago [\#229826](#229826) by [EnerW](/forum/user/38634-enerw "View EnerW's Profile")  Replied by *[EnerW](/forum/user/38634-enerw "View EnerW's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#229826 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

Did have something to fix that, but it did set the background back to a smaller size and this whas more of a problem to the users then the offset popup because it did make the screen look jerking.

Rene

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[EnerW](/forum/user/38634-enerw "View EnerW's Profile")**
- [![EnerW's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/38634-enerw "View EnerW's Profile")
- [ Offline](/forum/user/38634-enerw)

Less More

- Posts: 101
- Thank you received: 8
-
-

10 years 8 months ago [\#231515](#231515) by [EnerW](/forum/user/38634-enerw "View EnerW's Profile")  Replied by *[EnerW](/forum/user/38634-enerw "View EnerW's Profile")* on topic *[hikashop\_notice\_box\_content popup size problem](/forum/27-checkout/882173-hikashop-notice-box-content-popup-size-problem#231515 "-- HikaShop version -- : 2.6.1 Business -- Joomla version -- : 3.4.8 -- PHP version -- : 5.3.27 -- Browser(s) name and version -- : Chrome 48.0.2564.103m -- Error-message(debug-mod must be tuned on) -- :  Hi, Could you please help me, how I can set the size of the &quot;hikashop&#95;notice&#95;box&#95;content&quot; popup. In desktop mode it has a correct size, but in mobile view it has always about 100% height.  Attached I send screenshots about the difference.  Thank you in advance for your help.")*

@plengyel

Afternoon,

did some more tests with the sbox function to get a better display in responsive view.

To get a better display below a screen width of 979 pixels I did modify the modal.js and did add just one rule to the frontend.css

Not sure if this is a save solution with regard to a joomla update or some other functions that could be not working as expected but the result is looking fine.

Depending on the script file loaded you should change media/system/js/modal.js (compressed version) or media/system/js/modal-uncompressed.js or both if you do not know what is loaded.

Just change the: if (box.x &gt; 979) line to: if (box.x &gt; 319) in my system it's on line 244 and 447 of the uncompressed modal.js

and add the following to the frontend.css file of Hikashop:

/* set the sbox height for small screens */

@media all and (max-width: 479px){
.sbox-content-image img, #sbox-window {
min-height: 150px !important;
}
}

All the previous CSS changes I made are disabled for the moment and replaced with the one above.

The checkout pop-up is now centered on all screen sizes from 320px upwards, the image pop-up is also correct in portrait and landscape view and you have the sbox-overlay back again.

Below 320px the pop-up still needs correction, will test that with the old CSS corrections, but I am not sure what kind of mobile view is the lowest used on most phones.

Please note that I do not have any js or css skills and my changes could break your setup, so keep backups at hand.

Regards, Rene

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MjE3My1oaWthc2hvcC1ub3RpY2UtYm94LWNvbnRlbnQtcG9wdXAtc2l6ZS1wcm9ibGVtP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop Install &amp; Update Product &amp; Category Display Content Creation Sales and Orders Orders management Reports &amp; Statistics Customers Checkout Payment Methods Shipping Methods Import &amp; Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel &amp; Slider Mass Actions Filters &amp; Search Discount &amp; Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.072 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)
