Title: HTML/CSS advice with code
Last modified: August 22, 2016

---

# HTML/CSS advice with code

 *  [tg1](https://wordpress.org/support/users/tg1/)
 * (@tg1)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/htmlcss-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="http://www.site.org/"  target="blank">
       <img src="http://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="http://www.site.org">
       <img src="http://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="http://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](https://wordpress.org/support/users/contentiskey/)
 * (@contentiskey)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/htmlcss-advice-with-code/#post-5287206)
 * 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: [http://www.w3.org/TR/css3-mediaqueries/](http://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.
 *  [Moondrop](https://wordpress.org/support/users/moondrop/)
 * (@moondrop)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/htmlcss-advice-with-code/#post-5287228)
 * 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](https://wordpress.org/support/users/tg1/)
 * (@tg1)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/htmlcss-advice-with-code/#post-5287234)
 * [@moondrop](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/contentiskey/)
 * (@contentiskey)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/htmlcss-advice-with-code/#post-5287283)
 * use float left for all.
    be sure the divs are right after one another with no
   space between i.e. </div><div style…..
 *  [Moondrop](https://wordpress.org/support/users/moondrop/)
 * (@moondrop)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/htmlcss-advice-with-code/#post-5287290)
 * 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:
    [http://cssmediaqueries.com/what-are-css-media-queries.html](http://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.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 3 participants
 * Last reply from: [Moondrop](https://wordpress.org/support/users/moondrop/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/htmlcss-advice-with-code/#post-5287290)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics