Support » Theme: Spasalon » Responsive design problem

  • Resolved gabriratti


    I have a problem with responsive design. When the screen gets smaller, the images are distorted. How I can fix it?
    Is there any way that, when varying the size of the screen, the “large” pictures are replaced by smaller images instead of to compress and distort?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Can you share the URL?

    You will need to add small CSS tweak. Here are the instructions.
    1) Download this plugin

    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.


    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
    bottom:0em; }`

    -> Go to file flexslider.css Line no 85
    Find .flex-viewport replace code with below given code
    -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;
    position: absolute;
    right: 0;
    margin:0px auto;

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


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

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

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

    -> Open file custom-responsive.css

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

    overflow: hidden;
    margin:0px auto;

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

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


    Moderator Andrew Nevins


    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.

    Moderator Andrew Nevins


    If your theme doesn’t come with a space in the dashboard dedicated for CSS changes then try using an equivalent plugin:

    Then you write new styles that override old ones.

    Moderator Andrew Nevins


    If you need to make changes to files other than and including CSS then you’ll need to create a Child Theme:

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

    Moderator Andrew Nevins


    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 🙂


Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Responsive design problem’ is closed to new replies.