WordPress.org

Forums

[resolved] resizing issue (18 posts)

  1. dmd54
    Member
    Posted 2 years ago #

    extra eyes please. trying to figure out why the background image in the slider is not resizing as are the other images when adjusting screen widths?

    http://macrodiver.com

    thanks

  2. Media X
    Member
    Posted 2 years ago #

    Adjusting just fine at my end.
    The only difference is the orientation of the images (landscape and portrait).

  3. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    I had to add padding to see your slider background image and yes, it was not resizing like the other images. It was skewing.
    Hopefully this CSS should stop that:

    background-size: 100%;
  4. dmd54
    Member
    Posted 2 years ago #

    ok - tried the background size but it wasn't working.

    If you can, take a look now. the background is there and both slider and bg are resizing but the slider is being pushed below the background image. is that the right way to do this? then use a negative margin to position the slider?

  5. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    You can do what you had before, have it a background image instead of an actual <img>. That's the correct way.
    Alternatively use absolute positioning.

  6. dmd54
    Member
    Posted 2 years ago #

    I'm sorry but I don't get what's going on. I put it back in as a background image under the featured image div but now it again does not resize properly.

  7. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    I don't see a background-size style in your stylesheet (if that's where you're making the change)

    It should be on this style;

    #featured-image
  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Try making your changes through this plugin http://wordpress.org/extend/plugins/custom-css-manager-plugin/

  9. dmd54
    Member
    Posted 2 years ago #

    I am editing in the site style sheet.

    #featured-image {
    margin: 10px 10px 35px 10px;
    background: url("http://macrodiver.com/wp-content/themes/macrodiver/images/slide-bgsm.png");
    background-size: 100%;
    }

  10. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    I tested it out by adding padding of 50px to #featured-image and resizing the browser. I could not find an issue [screenshot].

    The only issue I can see, which is easily resolvable as you know, is the repeated background.

    Are you looking at a particular browser?

  11. dmd54
    Member
    Posted 2 years ago #

    All right. It works full screen but the padding is too much when resized for mobile.

    thanks for the help.

  12. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Remember, padding, just like any other value, can be added using pixels, percentages, em, centermetres, inches, etc. I think percentages or em will be suitable.

  13. dmd54
    Member
    Posted 2 years ago #

    yeah, I've tried every possible way I can think of and no combination seems to get it working both ways. Beyond frustrated.

  14. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    If all fails you can just use a media query to remove/reduce the padding at mobile size:

    @media all and (max-width: 480px) {
    
    }
  15. Media X
    Member
    Posted 2 years ago #

    I would suggest playing around with the padding for the title under the slider image. It has 40px top padding. I'll post the css solution as soon as i load your site. Seems like you're workin' on it and it's wont load atm.

  16. dmd54
    Member
    Posted 2 years ago #

    thanks - i'll try adjusting the padding on the title.

  17. dmd54
    Member
    Posted 2 years ago #

    ok. tried that, tried everything. don't think it's possible to do what i'm trying to do. the slider just will not position properly with the background image.

    thanks for the suggestions.

  18. dmd54
    Member
    Posted 2 years ago #

    All right. I got it. Had to adjust the image by adding a white border, then styled the featured image

    margin: 0 auto;
        max-height: 478px;
        max-width: 920px;
        padding: 0;
        position: relative;
        top: 0;

    ...and slider container

    left: 1px;
        margin: 25px auto;
        max-height: 478px;
        max-width: 920px;
        position: relative;

    this allowed me to lose all the padding that was overtaking the image at a mobile screen size.

    Again, thanks for helping out.

Topic Closed

This topic has been closed to new replies.

About this Topic