Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design CSS alignment of image and text

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #248455
    sc0twpburgh
    Participant

    Looking for assistance with the CSS required to make a change to the below URL:

    https://www.thebodyloveretreat.com/testimonials/

    Looking to bring the image alongside the text and not have the image underneath?

    Can this be done with CSS only? Or will the core files with layout need to be edited? Thanks.

    #248457
    Shikkediel
    Participant

    This looks to be working alright:

    .testimonial-content {
      float: right;
      max-width: calc(100% - 300px);
    }
    

    On larger screens in any case, it might be a good idea to put it inside a media query for the switching point. Trial and error tells me this is at 770px 768px.

    @media screen and (min-width: 768px) {
    .testimonial-content {
      float: right;
      max-width: calc(100% - 300px);
    }
    }
    
    #248458
    sc0twpburgh
    Participant

    Brilliant!! That worked. So on desktop full width view it loads perfectly. Any ideas on the CSS to make it load properly on mobile? So on mobile view, the text needs to move below the image again.

    I also need to re-arrange the height of the adjacent text now. But should manage that bit from here. Many thanks for your help!!

    #248459
    Seth-666
    Participant

    why not use flexbox? to do the trick? (sorry for the stupid question but i want to learn )

    #248461
    Shikkediel
    Participant

    You could try using the rule inside a media query, like I added to the reply later @primalspace. Then Bootstrap should take care of the realignment.

    It can probably be done with flexbox too, Seth-666. But this has a bit deeper browser support. And I’m more familiar with it myself.

    #248464
    sc0twpburgh
    Participant

    Yes. That works perfectly for mobile view! Many thanks for your help.

    I put top-padding: 36px; in to move the text in the midle of the row to match the new image position. And seems to load well on all screen sizes now. Thanks for your help!!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design’ is closed to new topics and replies.