slide responsive problem

I’m going to make a guess but it looks like your css is the cause.
Look here:

@media only screen and (min-width:770px){@media only screen and (min-width:770px){

.slide {
	list-style: none outside none;
	margin: 0 !important;
	width: 450px !important;
}

I’d start looking here to solve the issue.

where can i find it?
I don’t see it in syle.css
That’s what i see in it
/* Flex Slider css *****************************************************************************************************************
********************************************************************************************************************************/
.carousel{
margin-bottom:40px;
}

.carousel-inner img{
width:100%;
}
.carousel-caption{
top:20%;
}
.carousel-control .fa .fa-chevron-left{
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}

.carousel-text h1 {
margin: 0 0 0px 0;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
font-size: 3em;
font-family: ‘Open Sans’, sans-serif;
font-weight: 700;
color: #fff;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
line-height: 1.4em;
background:rgba(0,0,0,0.6);
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-ms-animation-delay: .3s;
-o-animation-delay: .3s;
animation-delay: .3s;
}

.carousel-text .enigma_blog_read_btn{
font-size: 25px;
color:#fff;
display:inline-block;
transition: all 0.4s ease 0s;
padding:10px 10px 10px 10px ;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
margin-bottom:20px;
box-shadow:0px !important;
}

.carousel-list li {
color: #fff;
font-size: 17px;
margin-bottom: 10px;
overflow: hidden;
font-weight: 600;
font-family: ‘Open Sans’, sans-serif;
padding:10px;
padding-left: 10px;
padding-right: 10px;
line-height:23px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

}
.carousel-list li:nth-child(1) {
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-ms-animation-delay: .3s;
-o-animation-delay: .3s;
animation-delay: .3s;
}
.carousel-list li:nth-child(2) {
-webkit-animation-delay: .5s;
-moz-animation-delay: .5s;
-ms-animation-delay: .5s;
-o-animation-delay: .5s;
animation-delay: .5s;
}

.carousel-list li:nth-child(3) {
-webkit-animation-delay: .7s;
-moz-animation-delay: .7s;
-ms-animation-delay: .7s;
-o-animation-delay: .7s;
animation-delay: .7s;
}

.enigma_slider_shadow{
background: url(‘./images/shadow.png’) no-repeat top center;
position: absolute;
left: 0;
right: 0;
height: 80px;
z-index: 99;
width:100%;
background-size: 100% 100%;
height: 60px;
bottom: -60px;
}

Did you add any custom CSS to the theme options panel in the appearance->customise->Theme General Options area of the wordpress admin tools? On add any css to the headers? If you look at the page source, its on line 366 of the main index.php

Yes, i add this to change the color in grey…

.header_section{
background-color:#999999;
}
.navigation_menu{
border-top-color : #999999;
}
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus, .dropdown-menu .active a {
background-color:#999999;
}
.carousel-list li{
background-color:#999999;
}
.enigma_blog_read_btn {
background-color:#999999;
background-image: linear-gradient(to bottom, #999999 50%, #fff 50%);
border-color:#999999;
}
.enigma_blog_read_btn:hover{
color:#999999;
}
.enigma_heading_title h3{
border-bottom-color:#999999;
}
.enigma_service_iocn {
border-color: #999999;
background-color: #999999;
background-image: linear-gradient(to bottom, #999999 50%, #fff 50%);
}
.enigma_service_area:hover .enigma_service_iocn i{
color:#999999;
}
a{
color:#999999;
}
a:hover, a:focus{
color:#999999;
}
.enigma_callout_area{
background-color:#999999;
}
.enigma_blog_thumb_wrapper h2 a{
color:#999999;
}
.enigma_blog_thumb_wrapper h2 a:hover {
color:#999999;
}
.enigma_blog_thumb_date li i{
color:#999999;
}
.enigma_blog_thumb_wrapper{
border-bottom-color:#999999;
}
.enigma_carousel-prev, .enigma_carousel-next{
border-color:#999999;
color:#999999;
}
.enigma_carousel-prev i, .enigma_carousel-next i{
color:#999999;
}
.enigma_carousel-prev:hover, .enigma_carousel-next:hover{
background-color:#999999;
}
.enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a{
background-color:#999999;
color:#fff;
}
.enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a:hover{
border-color:#999999;
background-color:#fff;
color:#999999;
}
.enigma_footer_area{
background-color:#999999;
color:#fff;
}
.navbar-default .navbar-nav .open a, .navbar-default .navbar-nav .open a:hover, .navbar-default .navbar-nav .open a:focus{
background-color:#999999;
}
.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus{
background-color:#999999;
}
.dropdown-menu li a:hover, .dropdown-menu li a:focus{
background-color:#ffffff !important;
}
.breadcrumb li a{
color:#999999 !important;
}
.enigma_sidebar_widget_title{
background-color:#999999;
}
.enigma_sidebar_widget{
border-color:#999999;
}
.enigma_fuul_blog_detail_padding h2 a, .enigma_fuul_blog_detail_padding h2{
color:#999999;
}
.enigma_fuul_blog_detail_padding h2 a:hover{
color:#999999;
}
.enigma_post_date{
background-color:#999999;
}
.enigma_tags a:hover, .enigma_cats a:hover{
background-color:#999999;
}
.enigma_tags a, .enigma_cats a{
background-image:linear-gradient(to bottom, #edf0f2 50%, #999999 50%);
}
.enigma_blog_comment:hover i, .enigma_blog_comment:hover h6{
color:#999999;
}

Hii Tom,

Firstly remove the below CSS from Custom CSS box. For this –
go to Dashboard -> Appearance -> Customize ->Theme Options-> Theme General Options -> Custom CSS

@media only screen and (min-width: 770px){
.slide {
 list-style: none outside none;
 margin: 0 !important;
 width: 450px !important;
}
}
.slide {
    list-style: none;
    margin: 0 !important;
    width: 450px !important;
}

After Removing above CSS, go to Dashboard -> Appearance -> Customize ->Theme Options-> Theme General Options -> Custom CSS

insert code into Custom CSS box and save

@media(max-width:1200px){ 
.slide {
    width: auto !important;
}
}

@media(max-width:768px){
.head-contact-info li {
    font-size: 30px !important;
}
}

@media(max-width:480px){ 
.head-contact-info li {
    margin-right: 0 !important;
    font-size: 14px !important;
}
.head-contact-info i {
    font-size: 24px !important;
}
.logo a {
    font-size: 38px !important;
    display: block !important;
}
}

This CSS will surely helpful to solve your issue.

Thanks.

• This reply was modified 8 years, 3 months ago by weblizar_support.

Thank you very much!
Now it works!
I have only a little question: can i see the mail address and the telephone number in the same line (or in two line but with an order) in the desktop version?
Congratulations for the theme and thanks for the support!

Hello Tom,

The mail address and the telephone number is already present in your theme. But the font size is too big of them. So we giving you CSS to decreasing font size.

go to Dashboard -> Appearance -> Customize ->Theme Options-> Theme General Options -> Custom CSS

insert code into Custom CSS box and save

@media(min-width:1200px){
.head-contact-info li {
    margin-right: 0px !important;
    font-size: 30px !important;
}
.head-contact-info i {
    font-size: 30px !important;
}
}

Thanks.