Responsive design problem

Can you share the URL?

The site is https://www.ioconsrl.com/ejemplo/

Hi,
You will need to add small CSS tweak. Here are the instructions.
1) Download this plugin https://www.ads-software.com/plugins/my-custom-css/

2) Enter the following css in the plugin

.home_service_img {
display: block;
width: 100%;
margin-bottom: 25px;}

3) These changes will fix your issue.

-vibhor

Thanks for the advice, it helped me solve the problem with the service images. But I still have problems with the large image of the cover (the image of the slider). How I can fix it? I tried to apply the same, but it did not work.

You are Welcome..

Again you will need to edit some part of css. Here are the instructions.

For this you will need to edit in these files.

1)style.css 2)/css/flexslider.css 3)/css/flex-demo.css 4)/css/custom-responsive.css and 5)index-slider.php

-> Open file index-slider.php

Find the code <li style=”height:800px;position:relative”>
Repalce with below code
<li style="height:auto;position:relative">

-> Go to file style.css line no 2523
Find .slider-thumb-container Replace it code with below code
`.slider-thumb-container{
bottom:0em; }`

-> Go to file flexslider.css Line no 85
Find .flex-viewport replace code with below given code
`.flex-viewport
{
max-height:100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}`

Now go to line no 253 of same file .
Replace the code with below given code

`.slidesDescription {
background: none repeat scroll 0 0 #F22853;
left: 0;
padding-top: 20px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
top:0em;
position: absolute;
right: 0;
margin:0px auto;
}`

Go to line no 281 in same file.
Replace code with below code

`.main-sliderimg
{
height:auto;
}`

-> Open flex-demo.css file.
Find .flexslider .slides img in line no 368.
Replace code with below code

`.flexslider .slides img{
width: 100%;
height:auto;
display: block;
} `

–> Find .flexslider .slides img in line no 376
replace with below given code
`.flexslider .slides img {
width: 100%;
display: block;
height:auto;
} `

-> Open file custom-responsive.css

Find .slider-thumb-container
Replace its code with below give codes

`.slider-thumb-container{
overflow: hidden;
bottom:0em;
margin:0px auto;
height:155px;
padding-top:19px;
display:block;
z-index:1;
}`

–> Find .slidesDescription comment this class.
or remove this style rule.

Save all changes done.
Note*
Do not change any media or screen size specific code in any css file.

-v!bz

I’m not sure you’re aware of this; if you edit the theme’s files like that the next time the theme is updated your changes will be erased. It also makes it difficult to debug when things go wrong, as you can’t refer to an unedited version of the theme to narrow down the issue.

If your theme doesn’t come with a space in the dashboard dedicated for CSS changes then try using an equivalent plugin: https://www.ads-software.com/plugins/custom-css-manager-plugin/

Then you write new styles that override old ones.

If you need to make changes to files other than and including CSS then you’ll need to create a Child Theme: https://codex.www.ads-software.com/Child_Themes

Otherwise the same applies, when the theme updates changes made to theme files will be erased.

If you’re using a Child Theme you don’t need a Custom CSS plugin as the CSS change be placed into the Child Theme’s style.css file.

@andrew Nevins

We’re aware with this and we’ll update these changes in the next version of theme.

Thank you very much again for the help, with this I have solved the problem.

Hi Gabriratti

If you are happy with theme and support then do remember to leave us a 5 star rating ??

Ankit