Set the background color
The Row element’s background color could be modified using the Design tab. The example below will paint the outer row’s background navy blue matching the inner row’s.
Step 1: Click on the inner Row element, select the Design tab on the left sidebar.
Step 2: Click on the Background section, select the color code of the Row element, and copy it.
Step 3: Select the outer row, and go to the Background section under the Design tab.
Step 4: Paste the color code into the color field
The result is a full-width navy blue background without you having to tamper with the image’s dimensions.
Adjust the dimensions of an image or a video
The Row element can also contain an image element and allow you to fine-tune your image’s dimensions.
Step 1: When nesting an Image element inside, the Row element will automatically adjust to fit the image.
Step 2: From here, you can adjust the image dimensions using the Dimensions (Width) and Full-width sections.
Dimensions (Width) section can be edited by pixels or percentages. By default, the dimensions are set to 1200 px or 100%.
Here’s an example of how the image looks when we reduce the dimensions to 50%.
Additionally, you can also make your image full-width by enabling the Full-width switch.
Responsive design for two-column content
Sometimes, the perfect design you just finished on the Desktop version does not look as good as it should be on the Mobile version.
For example, this block looks beautiful on the Desktop with the text blocks and images placed in zig-zag order.
But when you go to the Mobile version, the order is incorrect and the images are stacked directly on top of each other.
The root cause was due to your Row element not being responsive. To design your own responsive columns in GemPages, there are two methods you can follow:
Method 1: Duplicate And Hide Elements
Please follow the video tutorial below for full instructions:
Method 2: Use The Float Command In CSS Code
Let’s go back to the example with the two images and text above.
Step 1: Copy this line of CSS Code, we’ll use this to modify the layout of the second Row element underneath.
float: right!important;Step 2: Right-click on the Row below, which has the Image element on the left, and the two text elements on the right > Edit Code.
Step 3: Paste the code in this exact position, under the gf_column group and hit “Save”
Step 4: You will see the order of 3 elements inside this Row got reversed (image on the right and text on the left). Please go ahead and re-order them by dragging and dropping.
Step 5: Hit “Save” and “Publish” to check on your live site. We should achieve the same result with the zigzag layout:
You can also check out our video tutorial below:
Center The Middle Column Of A Three-Column Row
If you are having trouble centering the middle column of a three-column-row, here’s a neat little trick for you.
Step 1: Drop a Separator element inside each of the two outer columns.
Step 2: In the Settings tab of the Separator element:
- Adjust the Color value to “none” to make the Separator transparent.
- Reduce the Height value from “1” to “0” to make the Separator completely invisible.
Once finished, the middle column and all the elements nested inside will be perfectly centered horizontally on your live page.
Feel free to explore your one-stop shop knowledge base – the Help Center – for more guides and tutorials to master GemPages.