Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 28, 2015 at 12:54 pm #386933
    esmatta

    Hi, I received a great snippet of custom css from your support team to enable the blog posts to be arranged in a two column grid. Currently the site looks fantastic on desktop and tablets. I tested the site layout on smaller devices like phones and the text block is cut off on the far right hand edge.

    I used Eliot’s code:
    <style type = “text/css”>
    .slide-image {
    float: left;
    margin-right: 20px;
    }
    .slide-content { margin-left: 300px; }
    </style>

    I know it has something to do with the margin-left 300px. Is there a way for me to add a responsive rule in the css to adjust the layout for phones? Sorry for being such a pain.

    January 29, 2015 at 4:20 pm #387745
    Yigit

    Hi esmatta!

    Please add the code as following 

    <style type = “text/css”>
@media only screen and (min-width: 480px) {
.slide-image {
float: left;
margin-right: 20px;
}
.slide-content { margin-left: 300px; }}
</style>

    Regards,
    Yigit

    January 29, 2015 at 4:37 pm #387761
    esmatta

    Hi Yigit,

    Many thanks for the above code. I tried your snippit but the blog post excerpt was moved below the picture on all screens. Is there a way to keep the 2 column style but only adjust below a certain screen width? Is this achievable?

    You’d be a lifesaver if this were possible! :)

    Best.

    January 29, 2015 at 4:42 pm #387768
    Yigit

    Hi!

    Ok, please use Elliott’s code and then add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.slide-content { margin-left: 20px; }}

    Using media queries it is possible – http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

    Cheers!
    Yigit

    January 29, 2015 at 5:22 pm #387801
    esmatta

    Thanks again! I just can’t get the text to ‘fall’ under the image using the general styling panel. It still resizes the page content until the excerpt disappears off the right hand edge. I’ve added the code and forced a cache reload, but no effect :( Sorry for being such a nuisance.

    January 31, 2015 at 3:35 am #388677
    Josue

    Hi!

    Add this code either to the text block or Quick CSS:

    @media only screen and (max-width: 480px) {
    .slide-content {
        margin-left: 0 !important;
    }

    .slide-image {
        width: 100%;
    }

}

    Cheers!
    Josue

    January 31, 2015 at 3:25 pm #388762
    esmatta

    Thank you SO MUCH! This worked a treat! Kudos to all you guys on the Kriesi support team! You’ve made my weekend!

    January 31, 2015 at 8:52 pm #388842
    Josue

    You are welcome, glad we could help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.