Archived topic
Responsive Container
5 replies · Started by troyw on April 22, 2021
Hi team,
I am having some issues getting a particular container on my home page to be responsive. As you will see, I have created a container where I have an image with clear space to its left. I have placed a text box called 'Always on time' over this with a shadow. In Desktop view this looks fine, but as I shrink down to tablet and phone size, the image is going off the screen and I can't get the text box central.
While I can move the text box around OK, I can't seem to position the image using the Mobile editor.
Any ideas how I can make this container present OK in Mobile view?
Thanks
Hi there,
I'm not exactly sure I imagine what you're trying to do.
Do you want it to be laid out like this on mobile?
https://share.getcloudapp.com/OAuP6YYb
If yes, do margin-left and margin-right auto on @media(max-width:768px) for the specific element you're trying to center.
Elements usually go off-screen if you use negative horizontal margins. I recommend avoiding them as they can cause weird spaces on the sides and cause overflow scrolling if you didn't do overflow hidden on the container.
Hi,
Yes, this is what I am trying to do.
I am still a bit confused.
If yes, do margin-left and margin-right auto on @media(max-width:768px) for the specific element you’re trying to center.
Where is this?
Hi there,
the free version of GenerateBlocks doesn't have responsive controls for Backgrounds - its available in the Pro version with it Advanced Backgrounds option.
How do you want the layout to look on Tablet and Mobile - can you provide a mockup ?
Hey guys,
I am using GP Premium, so I have been using these controls.
The mock up that Elvin showed here is pretty close to what I am after. I just want the text box to sit center and the image just a little further right than Elvin's example.
https://share.getcloudapp.com/OAuP6YYb
I can always mess around with the left and right position of the image, but for some reason, I can't seem to select the responsive settings for the image. I can move the text box, but not the image?
Thanks
I can always mess around with the left and right position of the image, but for some reason, I can’t seem to select the responsive settings for the image. I can move the text box, but not the image?
You can move it with custom CSS if you're not using Generateblocks Pro.
The issue here is the actual orientation of the background image. It has too much negative space on the right side. While I understand why it was created this way, It's not ideal. There are better ways to do this with CSS rather than having the actual image file created this way.
You can try playing around with this CSS to move your background horizontally:
.gb-container-728af019:before {
background-position-x: 0;
}