HTML/CSS advice with code

  • Hey,

    I have a, probably, basic html/css question.

    1 – I have to have 3 logos side by side on desktop browsers.

    2 – So I did the code as best as I could.

    3 – Looks fine on the desktop browsers I have tested (a couple so far)

    4 – But on my iPhone – the images don’t “gracefully” stack. They sort of jam into one another.

    <!-- BEGIN.site-info -->
<div class="site-info" style="text-align:center;width:100%;float:left;">

<!-- BEGIN.A.wrap -->
<div style="float:left; width:30%;height:66px;">
<a href="https://www.site.org/"  target="blank">
<img src="https://www.bbbbbb.org/wp-content/uploads/logos_1.png"></a></div>
<!-- END.A.wrap -->

<!-- BEGIN.B.wrap -->
<div style="float:left; width:35%;height:66px;">
<a href="https://www.site.org">
<img src="https://www.site.org/wp-content/uploads/logos_2.png"></a></div>
<!-- END.B.wrap -->

<!-- BEGIN.C.wrap -->
<div style="float:right;width:34%;height:66px;">
<a href="www.site.org">
<img src="https://www.site.org/wp-content/uploads/logo_3.png"></a></div>
<!-- END.C.wrap -->

</div>
<!-- END.site-info -->

    I was hoping someone could take a look at the code below – and possibly let me know what is going wrong. Or what I can fix.

    Any help? Thanks!

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

    (@contentiskey)

    consider using media queries for controlling the display in smaller devices.
    i.e. display images 100% width for screen size max 300px.
    there are lots of resources available to help with that sort of issue.
    here is one resource: https://www.w3.org/TR/css3-mediaqueries/

    check to see if your theme has any media queries already set up.
    maybe your new inline CSS is overriding the theme CSS.

    Are your images fluid? Your columns/wraps are but your images may not be.

    Add the follow to your images (ideally through a CSS class):
    max-width: 100%; height: auto;

    Note that this will resize your images to your column’s widths. If you want them to have a specific stacking style you will need to control your column’s widths with media queries.

    Thread Starter tg1

    (@tg1)

    @moondrop – that worked perfectly.

    NOW to take it a bit further… the solution worked perfectly – but the images are small. Which is fine if worse comes to worse.

    Is there a way to show them STACKED on a mobile phone?

    Meaning – a bit of what @contentiskey said – show each at 100% the mobile width? Then that would stack them on a mobile device and show EACH as the full width of the screen?

    IF NOT – I am fine with the solution. This is just outside the area of what I know.

    lisa

    (@contentiskey)

    use float left for all.
    be sure the divs are right after one another with no space between
    i.e. </div><div style…..

    Are you able to edit your site’s CSS file? Or have access to your header.php so you can add an inline CSS style block?

    Currently from your code sample, everything is inline styled on your elements (IE. divs). You are going to need to work with media queries and CSS classes to achieve what you are looking for.

    Here is a good tutorial on media queries, and how to get your columns to change width based on viewport size:
    https://cssmediaqueries.com/what-are-css-media-queries.html

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘HTML/CSS advice with code’ is closed to new replies.