Slider Image Size Help

  • darkbrightly

    (@darkbrightly)


    10 years, 4 months ago

    I’m using the recommended image sizes (1170×500) for the home page slider and keep having significant areas cropped. You can see it here: http://www.cjbrightley.com/

    The second image in the slider was an experiment with moving the text in the image up to give room for the overlay text beneath it, rather than text on top of text. The images are the same size and general layout. The cropping is such that I can’t figure out how to position the text within the image so that it isn’t cut off or weird looking at different dimensions.

    The height of the slider is set at 500 px in the “Customize” panel in WordPress.

    Questions:

    1 – Does this responsiveness mean that I can’t have text in my slider images at all because it’s guaranteed to look crummy?

    2 – If I can have text in the images, do you have a “safe area” within the recommended 1170×500 that you know will not be cropped?

    3 – (possibly separate question) The slider does not appear at all on my iPhone in mobile view, nor do the featured pages. All that shows up is the comment form (which should not appear and does not appear on desktop). It shows up approximately correctly when I use my phone to view the full site.

    I am totally ignorant of any CSS and php solutions and am not running a child theme.

Viewing 5 replies - 1 through 5 (of 5 total)
  • rdellconsulting

    (@rdellconsulting)

    10 years, 4 months ago

    Start by fixing your Slide 1 (of 4) which is sized at 1500×500, not 1170×500.

    When all 4 are correctly sized, see if problems still persist and report back here.

    Thread Starter darkbrightly

    (@darkbrightly)

    10 years, 4 months ago

    Ok, I deleted that slide out of the slider, leaving three correctly sized images. I’d left that image in for comparison, but I guess that could have been affecting things. However, the slider is still wonky. Any other ideas?

    rdellconsulting

    (@rdellconsulting)

    10 years, 4 months ago

    OK, next one to try:

    Customise>Global>Image settings. Uncheck Dynamic slider images centering on any devices

    Thread Starter darkbrightly

    (@darkbrightly)

    10 years, 4 months ago

    Huh. Now that is interesting. On my phone showing the regular view (not the mobile view), it shows the whole image, in which the overlay is over the text (which I can figure out how to rearrange within the image if necessary) and most or all of the image is showing in the correct dimensions. On my laptop it shows the top 2/3 of the image, which happens to capture the text almost perfectly. I can rework the images to make that work. Can you look at it just make sure it works on another screen with a probably-different resolution?

    Thank you! I really appreciate your help.

    rdellconsulting

    (@rdellconsulting)

    10 years, 4 months ago

    Looks fine on 1920px monitor. Depending on Browser, you need to look into Developer tools which have a Responsive Design View and you’ll be able to test the whole range.

    Any imperfections can be fixed with @media code.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Slider Image Size Help’ is closed to new replies.