Okay
  Public Ticket #1297667
Responsive / adding popup window to label
Closed

Comments

  •  2
    Yackov started the conversation

    I'm writing with google translate.

    Good afternoon!
    I have two columns with a width of 50%.
    The calculator is in the right column.
    When the screen is larger than 800, everything is fine.
    If the screen is less than 800, the calculator "breaks". In this case, the drop-down menu does not open, the total disappears.
    The screen was attached.
    See here: https://home-granit.ru/pryamougolnyy-pamyatnik

    Attached files:  2017-09-09_09-17-27.png
      2017-09-09_09-18-36.png
      2017-09-09_09-19-33.png
      2017-09-09_09-19-56.png

  •  272
    Support Agent replied

    Hi Yackov,

    We checked the page on a couple of devices and we were not able to recreate the issue. Please have a look at the screenshots.

    Could you tell us on which device and browser were you testing?

    Thanks in advance.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  2
    Yackov replied

    For example, Samsung Galaxy Note 3 with an inverted screen.

    The problem is on any width, starting from 441 to 799 (on your screen width is less than 440)

  •  2
    Yackov replied

    screen

    Attached files:  viber image.jpg

  •  272
    Support Agent replied

    Hi Yackov,

    Thanks for the info.

    We checked again, and the reason for such display of calculator on smaller devices is due to the settings from your theme which are being applied to the Cost Calculator as well. Please try adding the code below to Additional CSS field, in order to adjust the width of the row containing the calculator:

    @media (max-width: 799px) and (min-width: 441px) {
     .columns_wrap:not(.columns_fluid) > [class*="column-"] {
        width: 100% !important;
    }
    }

    Let us know of the outcome.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  2
    Yackov replied

    I created the page on which I posted your code.

    2 columns are located in one column. Please check.
    Thanks in advance for the help

    https://home-granit.ru/support/

  •  272
    Support Agent replied

    Hi Yackov,

    The code seems to be working properly, calculator is not breaking anymore.

    Could you confirm it's working in your environment as well?

    Thanks in advance.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  2
    Yackov replied

    the calculator is working. But if the screen width is less than 440 and more than 800 content is located in 2 columns, and with a width of 441 to 799 - in one column. That is, your code did not help.

    Please check.

  •  29
    BoldThemes replied

    Hi,

    We are not sure we understand what is the issue at this moment. Sorry for that. Can you please attach the screenshot of the issue you are currently experiencing?

    Thanks in advance.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating.
    A huge thank you from BoldThemes in advance!

  •  2
    Yackov replied

    1. I need to have on the page the content was in 2 columns. See screen 1.
    2. After adding your code for the screen width in the range 441 - 799, the paginated page is located in one column (instead of two columns) See screen 2
    3. Attention, question :) Is it possible that the calculator is not "broken" when it is located in the right column relative to the image (see screen 3) with a screen width of 441 to 799?

    I hope I managed to explain and Google translator did not disappoint me.

    Attached files:  1.png
      2.png
      3.png

  •  272
    Support Agent replied

    Hi Yackov,

    Please note that the display of Cost Calculator on responsive depends on your theme settings, in terms of column width. It seems that you have been adding some custom CSS to adjust the width of the columns, which is probably causing this issue. Please try adding the code below to fix the responsive, and adjust the values according to your needs.

    @media (min-width: 441px) and (max-width: 799px) {
     .btQuoteBooking .btQuoteBookingForm.btActive .btTotalNextWrapper {
        padding-right: 0;
    }
    .btQuoteBooking .ddChild {
      right: -111px !important;
    }
    .btQuoteBooking .btQuoteSlider {
      width: 100px;
    }
    }

    Let us know if you need additional help.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  2
    Yackov replied

    Thank you, this question is closed!
    Now I have a new question :)

    To some <label> it is necessary to add hints with pop-up windows.
    For example,

    <label> Engraving colors <a class="popmake-primer_cv" href="https://home-granit.ru/popup/primer_cv/">? </a>></label>
    
  •  2
    Yackov replied

     But this does not work, apparently, the <a> tag inside <label> does not work. Can you suggest something?

  •  272
    Support Agent replied

    Hi Yackov,

    Glad we could help!

    You could try wrapping the entire <label> tag in <a> tag.

    <a class="popmake-primer_cv" href="https://home-granit.ru/popup/primer_cv/"><label> Engraving colors </label></a>
    

    Please note that we cannot provide support for this type of customization.

    Let us know of the outcome.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  2
    Yackov replied

    Thank you, no more questions!

    I made these changes:

    static function handle_shortcode ($ atts, $ content) {
    extract (shortcode_atts (array (
    'name' => '',
    'namuurl' => '',
    'url' => '',
    'klass' => '',
    'type' => 'text',
    'value' => '',
    'images' => '',
    'img_height' => ''
    ), $ atts, 'bt_cc_item'));
    $ output = '<div class="btQuoteItem"> <label>'. $ name. '<a class="'. $klass.'" href="'. $url.'"> <img src="'. $ namuurl. '"> </a> <!-- label--> <div class=" btQuoteItemInput "> '. $ input. '<!-- div--> <!-- div-->';</div></label></div>
    

    The result has a nice appearance (see screen)

    Attached files:  Безымянный.png

  •  272
    Support Agent replied

    Hi Yakov,

    Thanks for the info, we appreciate it!

    We are glad you were able to resolve the issue.

    Please let us know if you need additional help.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!