Home Forums EZY Template Open an Iframe in a modal popup?

This topic contains 26 replies, has 4 voices, and was last updated by  Support3 5 months ago. This post has been viewed 861 times

Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #10026069

    hostingames
    Participant

    Hi,

    My request is to open an Iframe in a modal popup
    As on the html code example here
    This code it works on the other tempate, but not on the ezy template

    Or maybe it’s missing a js code?

    Thank you


    #10026070

    hostingames
    Participant
    #10026079

    Support
    Keymaster

    Hello, to open an iframe in a popup here’s what you can do:

    HTML:

    <a class="popup-iframe" href="http://www.okler.net">Open Iframe Popup</a>

    JS:

    $(document).ready(function() {
    	$('.popup-iframe').magnificPopup({
    		disableOn: 700,
    		type: 'iframe',
    		mainClass: 'mfp-fade',
    		removalDelay: 160,
    		preloader: false,
    		fixedContentPos: false
    	});
    });

    Regards.


    #10026086

    hostingames
    Participant
    This reply has been marked as private.
    #10026106

    Support
    Keymaster

    Hello, please check below the responsive table with the classes you need to use to show the elements depending on the resolution:

    Screen Size Class
    Hidden on all d-none
    Hidden only on xs d-none d-sm-block
    Hidden only on sm d-sm-none d-md-block
    Hidden only on md d-md-none d-lg-block
    Hidden only on lg d-lg-none d-xl-block
    Hidden only on xl d-xl-none
    Visible on all d-block
    Visible only on xs d-block d-sm-none
    Visible only on sm d-none d-sm-block d-md-none
    Visible only on md d-none d-md-block d-lg-none
    Visible only on lg d-none d-lg-block d-xl-none
    Visible only on xl d-none d-xl-block

    And here’s the table with the breakpoints:

    Extra small
    <576px
    Small
    ≥576px
    Medium
    ≥768px
    Large
    ≥992px
    Extra large
    ≥1200px
    Max container width None (auto) 540px 720px 960px 1140px
    Class prefix col- col-sm- col-md- col-lg- col-xl-
    # of columns 12
    Gutter width 30px (15px on each side of a column)
    Nestable Yes
    Column ordering Yes

    • This reply was modified 1 year ago by  Support.
    • This reply was modified 1 year ago by  Support.
    #10026116

    hostingames
    Participant

    Hello, thank you very much

    And for the button that is too big in phone mode?


    #10026166

    Support2
    Keymaster

    Hello,

    Buttons doesn’t have responsive classes.
    In that case you can create your own responsive class using CSS media queries at (css/custom.css).

    Kind Regards,

    Rodrigo.


    #10026177

    hostingames
    Participant

    Hello,

    Which ones?

    Thank you


    #10026197

    Support2
    Keymaster

    Hello,

    (css/custom.css):

    @media(max-width: 767px) {
        .btn {
            font-size: 0.7rem;
            padding: 0.5rem 1.7rem !important;
        }
    }

    * Try with diferent values.

    Kind Regards,

    Rodrigo.


    #10026201

    hostingames
    Participant

    These are the most suitable values is

    @media(max-width: 767px){.btn{font-size:.7rem;padding: .4rem 0.7rem!important;}}

    Thank you


    #10028166

    hostingames
    Participant

    Hi,

    Would it be possible to have the PSD file of the images on the page “index.html”?
    I’m talking about images
    “Desktop-1.png, keyboard-1.png, mouse-1.png, elements-1.png, elements-2.png, mobile-1.png, headphone-1.png”

    Thank you


    • This reply was modified 5 months, 2 weeks ago by  hostingames.
    #10028168

    hostingames
    Participant
    This reply has been marked as private.
    #10028173

    Support2
    Keymaster

    Hello,

    1) Regarding the images, unfortunately due to copyrights rules we can’t distribute the images from our preview.

    2) Regarding the issue with carousel, we couldn’t reproduce the issue. Here is a screeshot:

    * Send a online link for us so we can inspect your code and help you with that.

    Kind Regards,

    Rodrigo.


    #10028185

    hostingames
    Participant
    This reply has been marked as private.
    #10028186

    Support2
    Keymaster
    This reply has been marked as private.
    #10028188

    hostingames
    Participant
    This reply has been marked as private.
    #10028189

    Support2
    Keymaster

    Hello,

    First uncomment the bootstrap:

    * This will solve the problem 3.

    For problem 1 you need this HTML structure for grouped button:

    <div class="btn-group btn-group-style-1">
    	<a href="#" class="btn btn-rounded btn-4 font-weight-semibold btn-dark mb-2">PRIMARY</a>
    	<a href="#" class="btn btn-outline btn-4 font-weight-semibold btn-dark align-items-center mb-2">PRIMARY <i class="fas fa-angle-right ml-2"></i></a>
    </div>

    Regarding the problem 2 we still couldn’t reproduce the issue. Did you tested in another desktop device ?

    Kind Regards,

    Rodrigo.


    #10028191

    hostingames
    Participant

    Hello,

    1) Okay I test

    2) I will redo a new test

    3) I comment on the bootstrap because it comes into config with my nav menu, I do not have the time to fix it
    I prefer to let him comment on the bootstrap:
    Why not give us a css code for?
     

    Thank you


    #10028193

    Support2
    Keymaster

    Hello,

    3) The bootstrap version inside your nav menu is v3.3.7 that’s incompatible with EZY. EZY needs bootstrap v4+. If you look at all elements on the page will see a lot of elements with wrong behavior and the reason is the version of bootstrap.

    Kind Regards,

    Rodrigo.


    #10028198

    hostingames
    Participant

    Hi,

    So I’m testing Porto 5.7.2 on a demo site
    No panel, as on the example here?

    https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_panels_contextual&stacked=h

    Kind Regards,


    #10028213

    Support3
    Keymaster

    Hi.

    I was a bit confused by this question.

    Anyway using the example you sent in the Porto 5.7.2 stay this way :

    remembering that this is the forum of Ezy and not Porto.


    #10028258

    hostingames
    Participant
    This reply has been marked as private.
    #10028262

    Support3
    Keymaster

    Hi,

    I can’t reproduce the error, have you fix it?

    Let us know if you need further assistance.

    Kind Regards,

    Otávio.


    #10028286

    hostingames
    Participant
    This reply has been marked as private.
    #10028291

    Support3
    Keymaster

    Hi,

    You can fix that just put this code into your (css/custom.css)

    .nav>li>a:focus, .nav>li>a:hover {
      background-color: #7f8c8d !important;
    }

    Hope it helps.


    #10028300

    hostingames
    Participant

    Hi,

    Thank you very much for your precious help, it works.
    Look at the “SHOW ALL” button relative to the other text and more to the left?


    #10028318

    Support3
    Keymaster

    For me it seems to be positioned in the same way as the other buttons.

    Let us know if you need further assistance.

    Kind Regards,

    Otávio.


Viewing 27 posts - 1 through 27 (of 27 total)