Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 23, 2020 at 2:11 am #1215341
    CodeSamurai

    Hi,

    I would like to get a blog layout similar to https://www.iwco.com/blog/. I would like the image to be on the left while all the text for a blog post to be on the right for the desktop view. When the screen size shrinks to the size of a mobile device I then would like the image to be on top while the text is below. If you look at https://www.iwco.com/blog/ and resize the page, you’ll see exactly what I’m referring.

    I have something similar setup currently for one of the websites I manage. I’m sharing the URL within the private content area so you can review. I have it setup so that the image is on the left and text on the right. I also increased the size of the image via custom CSS so the image is bigger. The problem is that when I view on a mobile device the image disappears. Is there any layout selection or custom CSS I can add so that the image displays at all times and when the view size is for mobile, the image is then displayed above the text just like the example URL I referenced?

    Thanks!

    May 25, 2020 at 11:29 pm #1216317
    Mike

    Hey CodeSamurai,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
	#main .av-alb-blogposts.template-blog > .post-entry > .blog-meta {
		display: inline-block !important;
		width: 100% !important;
	}
	.av-alb-blogposts.template-blog > .post-entry > .blog-meta > a {
		width: 100% !important;
        height: auto !important;
	}
	.template-blog .post .entry-content-wrapper {
    overflow: visible !important; 
}
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    May 26, 2020 at 4:12 pm #1216526
    CodeSamurai

    Hi Mike,

    Thank you for the response. I tried the code and cleared my cache (server and browser) and unfortunately I didn’t see any change in the layout. I also removed the CSS I had added and just use the CSS that was provided and the blog layout stayed the same.

    Can you confirm that the provide CSS will in fact move the image above the text when in the mobile view? When I go into the mobile view the images just disappear instead. I left the code you provided turned activate so you can see how the page works within the CSS implemented.

    Any other thoughts? Thanks!

    May 27, 2020 at 12:15 pm #1216906
    Mike

    Hi,
    Thank you for the feedback, it doesn’t look like the css above is working for you, perhaps there is a missing bracket or something in your css. When I inject the css for mobile the featured image is on top, Please see the screenshot in Private Content area.
    Please include an admin login in the Private Content area so we can take a closer look.

    Best regards,
    Mike

    May 27, 2020 at 6:07 pm #1217086
    CodeSamurai

    Hi Mike,

    Thank you very much for the quick follow-up! You are correct, there was an issue with the code I had copied. For some reason the < and > were HTML escaped when I copied and pasted into the CSS window. Once I corrected that problem everything works!

    Thanks again, this was a big help, I appreciate it! I am all set now.

    May 27, 2020 at 6:19 pm #1217098
    Victoria

    Hi CodeSamurai,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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