We are trying to use a side by side column set up however, as the screen gets smaller the info box on the right slips too low and past the image.
Is there a way of have the image a background post feature image in the column on the left?
My assumption is, if this is a background image the info box on the right wont be pushed down.
I see you use a grid with two columns, and then you use a negative margin to have the attractive overlap of the text over the image.
I'm not sure how having the image as a background image is going to help, as you are still going to need to manage the positioning of the text block on the right by manipulating the margin.
If you ask me—which I guess you did 🙂 —I expect that on larger screens you will have it look how it does now on desktop, with 2 columns, overlapping, and then on small screens it should stack, with the image followed by the text block. Maybe on intermediate screens it could also stack, but with a top negative margin so that the text block partly overlaps the image at the bottom?
So the solution would be to apply different margin settings at different widths.
Are you using Blocks?
The block editor allows you to do just that from within the editor, specify the different margins on mobile, tablet, and desktop.
If not then you'd need to set up those media queries in your style rules manually.
You know I just uploaded blocks to test however when doing this is deactivates Views....this we've used to practically build the test site. Blocks wasn't around when we started this site hence, had it been we may have tried it.
I guess in essence, building a site with Elementor is fine and we would have preferred to use Blocks and the default WP for specific pages just for Toolset results, I'm uncertain we can redo this now and to create pages that would look like the below: hidden link
How do I get round the fact, that to test Blocks, we lose all access to Views in admin?
Ref the post, yes I'm trying to make 'feature' post just a little less grid like as these will be for a selection of portfolios...just as a promo for specific things.
On this test: hidden link
I've used a table and messed with a media query and it works fine....I need to refine this however seems to do the job.
Is using 'tables' ok? Never used them with Toolset.
Views and Blocks are essentially the same plugin, just with different interfaces activated by default, hence you can have only one or the other plugin active at once.
But, with either, you can go to Toolset > Settings and specify which UI to use, blocks, or classic Views, or both.
So if you want to try out blocks on an existing site for some specific content you can go ahead and do that by enabling both UIs, which will leave your existing Views untouched and allow you to create new ones with blocks.
It used to be commonplace to use tables for layout when the alternatives were lacking, but nowadays it's really better to use them for tabular output only and use the various CSS layout options to achieve your layout. If tables work for you more easily than the alternatives you can continue with them...
You know, it's taken me months to get my head round using Views, not easy when you have specific layouts and ideas, just watched a couple of Blocks videos, while it looks easier...to start using this now feels like going backwards and relearning how to use a builder to achieve what I have done using code.
I presume Views is going nowhere?
Ref the post and side by side layout. Ok I guess using a Bootstrap grid is what you're recommending and I can mess with CSS to get the layout I want. Can I ask, see the content area on the right? hidden link
Is there a way of making this stay in the center/middle rather than me using a top margin which isn't really working.
I can do this with other elements but nor Toolset and Bootstrap.
I'll have to have a play around with it, as you really need equal height columns to be able to centre the content in the right hand column vertically, and I'm not sure the Bootstrap grid is geared up for that, it may need some tinkering.
I'll get back to you once I've managed to play around with it.
Glad I'm not getting frustrated over missing something obvious 🙂 Bootstrap seems pretty versatile however trying to make something look a little less rigid does seem a challenge.
If you come up with anything please let me know. I spent over an hour yesterday research all sorts on Google and couldn't get it to work.
No problem what so ever, appreciate your time when you have a moment.
One small thing in addition, as you scroll down the 6 items, they get larger and go out of line. I can't for the life of me see why and this not the case on any other grid we've created.
Ref the above. I have used the table layout and added some CSS and media queries and this looks and works just how I wanted.
Check it out: hidden link
Is there any reason why I should not use a table for this?
Sure you indicated a Bootstrap grid is better however for this layout, its stable and works great.
I was going to use this just for featured posts however may also use this layout on search results if it's really not suggested it's used widely.
I was alluding more to the fact that HTML purists would tsk-tsk at the use of tables for layout (rather than presenting tabular data) but there's no practical reason not to use it when it meets a need and works.
I had thought it was a requirement for the text box to be vertically aligned in the centre of the image, which was going to be perhaps the challenging part.
One final comment: the cute dog is mostly lost on anything but wide screens.
Thank you ref your thoughts on using tables. Well many would tsk-tsk at many things...using builders is frond upon so I guess one can never win with purists. Not really bothered 🙂
I'll keep this layout to the odd featured post and not worry about it. In time I may mess with this further however the table works and seems stable. All I'm after is a little less of a rigid layout, something a tad more pleasing. To be fair I haven't come across any layouts using Toolset that inspire creativity.
Ref the dog image. Yes I work on large screens also and need to remake the image and flip this round, its not sized right and on my list today. Many thanks for pointing this out 🙂
I'm taking a note of this layout, so that when we discuss features for the next development rounds (with visually pleasing designs being a current focus) I'll bring it up, making it easier to do something like this.
We have a very nice release coming up soon (likely a beta next week), and I'm hopeful to have something to add a bit of visual flair to sites included in the next dev cycle.
