Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 19, 2014 at 2:35 pm #353664
    AnnemarieDoolin

    On the frontpage I have images in a div all placed on one line. Mac users are saying that the last image is wrapping around. Is there a way I can add something to the div to attach the images to stay blocked together? (I have the same problem twice on this page so if you could share your genius I can fix them both!)

    I did experience this problem with my pc but I set the images to “none” alignment and it fixed.. but apparently not for macs.

    The code is set in a text block as the customer wanted custom sized boxes. I have included the code for the 3 images as an example of what I have done:

    <div>
<img class="alignnonesize-full wp-image-680" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/mayianne-dinesen.jpg" /><a href="http://mayiannedinesen.dk/meditation-mindfulness/"><img class="alignnone wp-image-680" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/forside-12minutter-text.jpg"  /></a><a href="http://mayiannedinesen.dk/kurser-foredrag/"><img class="alignnone wp-image-680" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/kurser-foredrag-mayianne-dinesen.jpg"  /></a></div>

    LINK TO FRONTPAGE

    November 19, 2014 at 3:54 pm #353743
    Josue

    Hey!

    I’m not noting the issue on my end (Chrome / OS X 10.9) but i’d suggest setting a fixed percentage width to each image to make sure they are always in one line, like this.

    <div>
<img class="alignnonesize-full wp-image-680" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/mayianne-dinesen.jpg" style="width: 31%" />
<a href="http://mayiannedinesen.dk/meditation-mindfulness/" style="width: 29%"><img class="alignnone wp-image-680" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/forside-12minutter-text.jpg" /></a>
<a href="http://mayiannedinesen.dk/kurser-foredrag/" style="width: 40%"><img class="alignnone wp-image-680" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/kurser-foredrag-mayianne-dinesen.jpg" /></a>
</div>

    Regards,
    Josue

    November 23, 2014 at 6:26 pm #356296
    AnnemarieDoolin

    Tried % widths but this did not work. Tried all these things but still cannot get pics to block on one line on the devices bigger than mobile correctly:-
    – taken all pics down to same size width “343 px” (though not what client wanted, she paid a designer for this specific design! and I know she will want me to reinstate the differing widths in accordance with her original design!)
    – made sure all three pics together are less than the 1030px width container width (all pics collectively cover a width of 1029px)
    – took out bold part of the class….class=”alignnone wp-image-680”
    – took out class=”alignnone wp-image-680″ completely
    – reinstated class=”alignnone”
    – put in width and height in pixels;
    – took out width and height in pixels;

    I CANNOT HAND OVER THIS PROJECT until this is done and I’ve run out of solutions!! I need to know how to fix this because I have two examples on that frontpage and it will come up again in further projects.

    Currently the code now sits with…
    <div><img class="alignnone" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/frontpage-mayianne-dinesen.jpg" alt="Meditation og Mindfulness på Mayianne Dinesen" /><a href="http://mayiannedinesen.dk/kurser-foredrag/"><img class="alignnone" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/frontpage-meditation-12minutter.jpg" alt="Meditation og Mindfulness på Mayianne Dinesen" /></a><a href="http://mayiannedinesen.dk/meditation/"><img class="alignnone" src="http://mayiannedinesen.dk/wp-content/uploads/2014/11/frontpage-mindfulness-kurser-foredrag.jpg" alt="Mindfulness kurser og foredrag på Mayianne Dinesen" /></a></div>

    November 23, 2014 at 8:09 pm #356333
    Josue

    Hi!

    Have you tried using a Grid Row element with this settings? i think it would be more convenient to use an element already built-in in Enfold.

    Best regards,
    Josue

    November 25, 2014 at 1:29 pm #357501
    AnnemarieDoolin

    Thanks Josue, I used the Grid Row and it did give me some more versatility. Problem is customers expect perfection on every device and then go to “designers” who design for brochures and paper and expect miracles!!

    Tips for anyone else reading who has this problem…

      mixing a row of images and text is not recommended for showing on smaller devices

    … better to convert the text to an image.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘how to get images placed in div to stay inline and not wrap around’ is closed to new replies.