How to handle fixed image widths for mobile screens

  • Resolved mtjmohr

    (@mtjmohr)


    6 years, 7 months ago

    Hello,

    in the Bento them, I am using the SiteOrigin Editor which I find quite appealing.

    My customer wants the following section (1 cell, 1 row) to be fixed when scrolling some text – the text defined within the next section (1 cell, 2 rows):

    <h1 style="font-size: 46px; font-weight: normal; color: gray; padding-top: 150px; padding-bottom: 100px;">HEADING</h1>
<p style="text-align: right; padding-right: 0px; padding-bottom: 100px; margin-top: -200px;">
Some text
</p>
<img src="https://wherever.de/wp-content/uploads/2018/07/DSC4011-1024x681.jpg" alt="Text" width="600px" class="alignright size-full wp-image-481 bild" style="margin-top: 0px; margin-right: -110px;" />

    Statically, everything looks nice for the customer.

    But:

    I need to differentiate between a desktop PC, an iPad and an iPhone layout. Which is okay, too, if it were not for the fact that I need to define the image’s size as in the code above (I do not see how to make it “responsive”).

    What I need to do now is to differentiate the image size for the various displays.

    The SiteOrigin Editor offers modifications for the desktop and the mobile CSS in separate data entry regions on the right hand side, but I do not see any different results.

    Another option would be to make an entry into the additional CSS area, but I do not know how to address desktop and mobile layouts separately.

    In the upper-mentioned image code, I have integrated “bild” so that I could add something like

    .bild img { width:900px; } for the desktop and
.bild img { width:600px; } for the mobile version.

    Could such an approach, entering this code in the additional CSS area, be successful? If so, how to differentiate between a desktop and a mobile layout?

    I hope I have made clear what I am looking for.

    Best regards

    Markus

    • This topic was modified 6 years, 7 months ago by mtjmohr.
    • This topic was modified 6 years, 7 months ago by mtjmohr.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author satoristudio

    (@satoristudio)

    Hello Markus,
    adding custom CSS to the “Additional CSS” tab of the “Appearance – Customize” admin section is the best solution, as it will preserve the code even if the theme changes after an update. From your description, what you’re looking for is most probably @media queries ??

    Thread Starter mtjmohr

    (@mtjmohr)

    Hello,

    yes, I thought as much. But where do I get more information about how to define a CSS command for the mobile layout? You mentioned @media. Can you please give me a hint whether this is Bento-associated or a genuine WordPress property? And maybe a URL where to look for such information?

    Best regards

    Markus

    Theme Author satoristudio

    (@satoristudio)

    This is a CSS feature, and therefore its implementation is not dependent on the theme. You can look for e.g. “CSS media queries” in a search engine of your choice.

    Thread Starter mtjmohr

    (@mtjmohr)

    Thank you very much,

    I think I have understood how to handle that now. I have added a variety of

    @media screen commands

    For the additional CSS and it works.

    Best regards

    Markus

    Thread Starter mtjmohr

    (@mtjmohr)

    For additional commants or questions you can address me here.

    Best regards

    Markus

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to handle fixed image widths for mobile screens’ is closed to new replies.