WordPress.org

Forums

Spasalon
[resolved] Responsive design problem (13 posts)

  1. gabriratti
    Member
    Posted 1 year ago #

    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?

  2. a.ankit
    Member
    Posted 1 year ago #

    Can you share the URL?

  3. gabriratti
    Member
    Posted 1 year ago #

  4. vibhorp
    Member
    Posted 1 year ago #

    Hi,
    You will need to add small CSS tweak. Here are the instructions.
    1) Download this plugin http://wordpress.org/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

  5. gabriratti
    Member
    Posted 1 year ago #

    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.

  6. vibhorp
    Member
    Posted 1 year ago #

    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

  7. Andrew
    Forum moderator
    Posted 1 year ago #

    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.

  8. Andrew
    Forum moderator
    Posted 1 year ago #

    If your theme doesn't come with a space in the dashboard dedicated for CSS changes then try using an equivalent plugin: http://wordpress.org/plugins/custom-css-manager-plugin/

    Then you write new styles that override old ones.

  9. Andrew
    Forum moderator
    Posted 1 year ago #

    If you need to make changes to files other than and including CSS then you'll need to create a Child Theme: http://codex.wordpress.org/Child_Themes

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

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    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.

  11. vibhorp
    Member
    Posted 1 year ago #

    @Andrew Nevins

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

  12. gabriratti
    Member
    Posted 1 year ago #

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

  13. a.ankit
    Member
    Posted 1 year ago #

    Hi Gabriratti

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

    Ankit

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.