Change image size for mobile

  • I have an image that looks fine on preview of desktop and tablet, but it gets cut off on mobile view. In chrome inspector, I see the following:

    .wp-block-image .components-resizable-box__container img {
    display: block;
    width: inherit;
    height: inherit;
}

    and if I change the width and height to 50% it fits fine.

    To test things, I went to simple CSS and added the following:

    .wp-block-image .components-resizable-box__container img {
    display: block;
    width: 50% !important;
    height: 50% !important;
}

    And nothing changes.

    So the first question is what am I doing wrong with simple CSS.

    After getting it to work, I should be able to use:

    @media (max-width: 768px) {

    .wp-block-image .components-resizable-box__container img {
    display: block;
    width: 50% !important;
    height: 50% !important;
    }`
    }`

    except it would affect ALL images in mobile, and I just want this one to change. So how can I change just the one image.

    Thanks,
    Doc

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

  • Hi there,

    is the issue only when you’re in the editor ?

    Thread Starter tthdoc

    (@tthdoc)

    Thanks for the quick reply. So I removed the CSS and resaved it. I then published it and checked my phone and yes, the image is resized, but not in the preview when in the editor. So this leads me to another question. That same page on the preview looks perfect, meaning the 2 paragraphs of text line up with the image (so the image say is 200 px in height, the paragraphs start and end totaling 200px. But when I go to preview in another tab, it shows the sidebars as well and the alignment is not there anymore since the text is now in a smaller space. So what is the best way to edit? Right now it seems I would have to align, check in another tab, readjust the image size, then check again, etc.

    Another related question. Since the image is resized on mobile but is not centered, is there a way to have it center as well (and I guess same could be said for tablet when the text gets pushed to below the image instead of next to it.

    Thanks again.
    Doc

    ying

    (@yingscarlett)

    Hi there,

    Can you link us to the page where we can see the problem?

    Thread Starter tthdoc

    (@tthdoc)

    I uploaded 2 screenshots.
    The first one (image1.png) shows the page in edit mode with the settings box closed, and you can see the text starts at the top of the image and ends at the bottom of the image.

    In the second (image2.png), I preview in a new tab, which shows it as the site live would be, and you see the alignment is different.
    So it is hard to visualize when editing since the side bars are not accounted for.

    Also, just recently when attending a webinar when they were using generate press theme and were editing, the black box (the one on the dashboard with plugins, users, etc) was present. As you can see in my screenshot, there is just a W in the upper left that I have to click if I want to see dashboard options (and it exits the editing). Is there anything I can do to change the behavior so that I see the dashboard black sidebar when editing.

    Thanks again.
    Doc

    https://drive.google.com/file/d/17x2LelhlM9ltqR3X067u13XNRuZ9zyJr/view?usp=sharing https://drive.google.com/file/d/1HJMtiltiDouDEqlSt6-bFot5_renMC5T/view?usp=sharing

    Thread Starter tthdoc

    (@tthdoc)

    Oh and just FYI, here is the screenshot of what it looks like in mobile preview, yet on my phone it does resize, but it also shows in left justified. How would I have it center when looking at it on the phone.

    https://drive.google.com/file/d/1ukdD2zwhgvrZtZxXU8aAJKuJFb7YFowF/view?usp=sharing

    Thanks again.
    Doc

    ying

    (@yingscarlett)

    I’m not able to access the images on your google drive, I’ve sent out a request.

    Based on your description, the problems don’t seem to be theme specific, should be WP general issues.

    Can you try switching to another theme, do those problems go away?

    Let me know!

    Thread Starter tthdoc

    (@tthdoc)

    You should have access to the images now. And which problems are you referring to? The black dashboard bar occurs on whatever theme I use (I have another site that uses wordpress and it happens there as well, and on my desktop or laptop. I just am trying to find someone who might know why and if it is wordpress in general, is there a setting that would account for the fact that another person using the same version of wordpress and the same theme does not have that issue.

    As to the images, again, not sure what you mean. When you edit, it shows the post in full screen, not as it appears on the live website it is only showing the post, not the sidebars that show on the site. So was just wondering if there was an easier way to edit. As it is, it is not WYSIWYG. If that is the way it is then so be it, I will just deal with it.

    Thanks,
    Doc

    ying

    (@yingscarlett)

    I’m still not able to access the screenshots.

    The image block is a WP core block, I don’t think there’s a setting to set it left aligned on desktop while center aligned on mobile. Custom CSS would be required in this case.

    Thread Starter tthdoc

    (@tthdoc)

    I just tried again with google drive. I think you should be able to access them now. Let me know.
    Thanks,
    Doc

    ying

    (@yingscarlett)

    I can see the images now.

    1. There’s no sidebar presented in the page editor which is a normal behavior for most WP themes except Twenty Twenty Two theme which supports full site editing. But the editor container width should be matching the front end content width. I don’t see this issue on my end, can you make sure your GP theme is up to date? The latest version is 3.1.3.

    If your GP is up to date, can you try disable all plugins to eliminate conflicts?

    2. Showing dashboard toolbar on page editor? I don’t think GP has such a setting, as when you click any menu item in the dashboard toolbar, you will be leaving the page editor, I don’t see a point to have the dashboard toolbar visible in page editor. Let me know I miss anything, if you have an example to show me, I would love to have a look.

    3. The image block been cut on mobile preview, that’s not something GP can control, this is controlled by WordPress.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change image size for mobile’ is closed to new replies.