Custom HTML not formatting correctly on mobile

  • Author
    Posts
  • #73220

    Hi there,
    A while back, you gave me the following code to create a gallery of images on my website:
    <div class=”row”>
    <div class=”col-lg-4 col-md-4″>ADD YOUR VIDEO #1 HERE</div>
    <div class=”col-lg-4 col-md-4″>ADD YOUR VIDEO #2 HERE</div>
    <div class=”col-lg-4 col-md-4″>ADD YOUR VIDEO #3 HERE</div>
    </div>
    <div class=”row”>
    <div class=”col-lg-4 col-md-4″>ADD YOUR VIDEO #4 HERE</div>
    <div class=”col-lg-4 col-md-4″>ADD YOUR VIDEO #5 HERE</div>
    <div class=”col-lg-4 col-md-4″>ADD YOUR VIDEO #6 HERE</div>
    </div>
    The code worked amazingly well (in fact, I am using it on two pages!), however, when I am viewing those pages on a mobile device (particularly an IPad), the pages are not formatting correctly. Specifically, if I view the page horizontally on the IPad, the page looks as it should, however, if I turn the IPad to view the page vertically, the images become all jumbled. Is there any way to correct this? Hopefully, this will be one of my last tweaks before I can launch! Thanks again!

    The blog I need help with is chefnickleahy.wordpress.com.

    #73335

    tarasdashkevych
    Theme Author

    Hello,

    Those columns will have a full width layout when you view the site on mobile devices. So, you will have one column per row.

    Are you adding any other HTML to those columns?

    #73358

    Hi,
    Thanks so much for getting back! I understand that the images may shift to one column when the IPad is turned vertically, however, the titles of the images are becoming very scrambled. Here is a link to view what I am referring to. One of the images shows the IPad when it is held horizontally, and the other shows what it looks like when I turn the IPad vertically. https://plus.google.com/photos/109832310056712103165/albums/6133286393265757985

    Perhaps it is something wrong with my code? Here is an excerpt from my code for one of the images:
    <div class=”row”>
    <div class=”col-lg-4 col-md-4″ style=”text-align:center;”>Atlanta Journal & ConstitutionAJC_Aphrodisiac
    8 Unexpected Aphrodisiacs
    February, 2015</div>

    Thank you again! There is no way I could have done this without this support forum!

    #73360

    Sorry…I can’t seem to get my code to upload correctly to the forum.

    #73387

    tarasdashkevych
    Theme Author

    Could you please make your site public for a little bit, so I can see the code. Because it’s hard to tell what’s the issue.

    And also, post the link where this code is located.

    Thanks.

    #73388

    Hi There,
    Thank you again for looking into this! I made my site public, so hopefully that helps you to see the issue. Also, the pages that are affected by this are the following:
    https://chefnickleahy.wordpress.com/press/
    and
    https://chefnickleahy.wordpress.com/videos/

    Thank you again!

    #73389

    tarasdashkevych
    Theme Author

    It happens because of float properties that you’ve set for your images.
    Try to remove align classes from your images.

    #73517

    Hi again,
    Thank you again for your quick reply, and my apologies for my slow reply. This project keeps getting put on the back burner recently! Anyway, I removed the float property from that page, and it still seems to be formatting incorrectly when using on a mobile device (specifically an IPad turned vertically). Here is all the CSS that I have applied to that page. Perhaps I am getting a little too big for my britches by attempting some of these customizations! Hoping you can help with this one last glitch, so that I can publish. Thank you again!

    .page-id-525 #single-featured-img-container {
    display: none;
    }

    .page-id-525 .hentry-inner {
    background-color: #ededed;
    margin-top: 40px;
    }

    .page-id-525 .hentry {
    background-color: #ededed;
    margin: 50px;
    }

    .page-id-525 .entry-content {
    background-color: #ffffff;
    margin: -100px;
    padding: 40px;
    }

    #73524

    tarasdashkevych
    Theme Author

    Hello,

    Your images have float properties, and that’s why they are messed up.
    You need to remove .alignright classes from your images in your page content ( http://i.imgur.com/DJH7L5m.png ), and then update your page.

    #73526

    Hi,
    Thank you again for following up! I am so sorry to be a pest about this issue. I was able to change the image alignments to “noalign”, however, the page is still not formatting correctly on mobile. I tried leftalign, noalign, and all the combinations. With the noalign option, all of the images are just going down the page in a single column. Is there anyway to keep this format for mobile and just have it shrink down to smaller size? I really like how the page looks on my laptop and I hate to have to change the style….any work-arounds are much appreciated! Thank you again!

    #73527

    tarasdashkevych
    Theme Author

    Hello,

    The reason why it happens is because some of your elements have inline display property. So, please try to wrap your column content with p tag. For example:

    <div class="col-lg-4 col-md-4" style="text-align:center;">
    
    <p><strong>Jezebel Magazine</strong></p>
    <p><a href="http://digital.modernluxury.com/publication/?i=240579&ver=html5&p=118#{%22page%22:118,%22issue_id%22:240579}"><img class=" wp-image-560 size-full alignnone" style="border:2px solid #cccccc;" src="https://chefnickleahy.files.wordpress.com/2015/03/jezebel_hottest_restaurant.jpg?w=760" alt="Jezebel_Hottest_Restaurant"   /></a></p>
    <p><em>100 Hottest Restaurants</em></p>
    <p>February, 2015</p>
    
    </div>
    #73533

    Hi again,
    Thanks so much for you persistent replies! I added the <p>tags and it seems to not have really solved the problem. On one hand, the text is now aligning closer to the corresponding image, however, there are now weird spaces and gaps. More importantly, it is still causing the images to appear as one column when viewing on mobile device. I really want to keep the three column format for all media. Is this possible to do? Or should I start rethinking the entire page? It seems to me that the page should just automatically resize when viewing it on mobile, rather than the entire format changing. Thank you again for your help on this! I am not sure where else to turn.

    #73534

    tarasdashkevych
    Theme Author

    You are right, p tag create some spaces. If you want to avoid this spaces and gaps then you can try to replace it with div. Also, lets add one more class to the column container (.col-sm-4), and if it will work better for you.

    Example:

    <div class="col-lg-4 col-md-4 col-sm-4" style="text-align:center;">
    
    <div><strong>Jezebel Magazine</strong></div>
    <div><a href="http://digital.modernluxury.com/publication/?i=240579&ver=html5&p=118#{%22page%22:118,%22issue_id%22:240579}"><img class=" wp-image-560 size-full alignnone" style="border:2px solid #cccccc;" src="https://chefnickleahy.files.wordpress.com/2015/03/jezebel_hottest_restaurant.jpg?w=760" alt="Jezebel_Hottest_Restaurant"   /></a></div>
    <div><em>100 Hottest Restaurants</em></div>
    <div>February, 2015</div>
    
    </div>
    #73535

    Hi There!
    That worked!!!! Thank you! I took out the p-tags and just went with the new column container and it looks great. Thank you so much for sticking with me! I have one final little question in regards to the margins (I am sure it has to do with something that I did wrong!). Since it is a new topic, I will post a new discussion. Thank you again!

    #73536

    tarasdashkevych
    Theme Author

    You are welcome :)

The topic ‘Custom HTML not formatting correctly on mobile’ is closed to new replies.