Wordpress Codeless Slider Responsive Issue

If you visit my website so far, http://trulydesigns.com/ you will notice that everything looks in order.

If you visit the web page via mobile such as an iPhone 5s the slider looks out of place. http://quirktools.com/screenfly/#u=http%3A//trulydesigns.com&w=320&h=568&a=37&s=1

function createSlider(){
    global $cl_redata;
    if(isset($cl_redata['codeless_slider_height']) && $cl_redata['codeless_slider_height'] != '100%')
        $height = $cl_redata['codeless_slider_height'];
    elseif(! isset($cl_redata['codeless_slider_height']))
        $height = '450';
    else
        $height = 'fullscreen'; 

    $this->height = $height;

    $extra_class = '';
    if($cl_redata['slider_parallax']) 
        $extra_class .= ' parallax_slider';

    $output = '<div class="codeless_slider_swiper '.esc_attr($extra_class).'" style="'.(($height == 'fullscreen')?'':'height:'.$height.'px').'">';
        $output .= '<div class="loading"><i class="moon-spinner icon-spin"></i></div>';
        $output .= '<div class="codeless_slider_wrapper" data-start="transform: translateY(0px);" data-'.(($height == 'fullscreen')?'1440':$height).'="transform: translateY(-500px);">';
            $output .= '<div class="codeless-slider-container swiper-parent swiper_slider codeless_slider"  data-slidenumber="1" data-height="'.esc_attr($height).'">';
                $output .= '<div class="pagination-parent nav-thumbflip nav-slider">
                                <a class="prev" href="">
                                    <span class="icon-wrap"><i class="icon-angle-left"></i></span>
                                    <div class="text">'.__('PREV','codeless').'</div>
                                </a>
                                <a class="next" href="">
                                    <span class="icon-wrap"><i class="icon-angle-right"></i></span>
                                    <div class="text">'.__('NEXT','codeless').'</div>
                                </a>
                            </div>';
                $output .= '<div class="swiper-wrapper">';

    $this->output[] = $output;
}

This is a snippet of the “codeless_slider.php”, somewhere in my files it’s pulling “min-height: 236.97522816166884px;height: 236.97522816166884px;” and I can’t figure where from, so any help is greatly appreciated.

Answer

It can be tricky because you use a plugin to not have to build it yourself, but sometimes plugins inject code and you have to learn how it is built in order to make it work the way you want anyway.

While learning WordPress development, I learned to be best friends with the DOM inspector in Chrome and to use the !important declaration to overwrite style rules. It looks like you could do that here with success.

Good luck!

WordPress Codeless Slider Responsive Issue

Advertisement

Answer