Row With 2 Columns That Includes a Button and Image

Support
#1

Hi

I have a number of call to action sections on the website which look good on larger screen displays but I am trying to make it work for phones and also tablets in portrait mode.

For the smaller screens, I have a row that I would like the clickable button to be just left of the middle of screen and an image (that is part of our logo) to the right of the middle of screen. For some reason though, I cannot get the button and the image on the same line. The image keeps going down to the next line. I do notice that if I put a border around the image, for some reason the border extends all the way to the left edge of the screen, which is making the image size way larger (in width) than the image actually is or needs to be. I assume this is why it is forcing the image to the line below.

Please let me know what I am doing wrong.

Thanks

#2

Hi there,

It seems that the image element is in a block mode. Please kindly go to the image element and click on the Customize tab, then inside the Inline CSS options add display: inline-block;.

If you still have the problem kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Also, give us the name of the page and screenshot of the section in question.

Thank you.

#3

Hi There,

Seems like you forgot to provide the URL.

Thanks

#4

The site isn’t live yet, so that is why I gave you the login info in the secure note above.

Thanks

#5

Hi There,

I can see the login info, but it seems that you have forgotten to include your site URL that you’re referring.

Thanks!

#6

Sorry about that.

Here it is:

LittleGreenFrogProductions.com

#7

Hi There,

Thank you for the URL, I’m kind of not sure what you’re trying to do, but I know why the button, text, and logo element keeps on stacking on mobile view. That is because you placed them in a separate row and separate columns.

Please redo your call to action section for mobile, place all the 3 elements in one row one column, (button, text, logo) in that order. Then add a common CLASS to all your call to action section for mobile. So we can target them all at once with a custom CSS to keep all 3 elements inline.

And please provide us a mockup design of what you’re trying to do to clear all the confusion.

Cheers!

#8

Hi There

Thank you for the response.

To make it more clear what I am trying to do, on the mobile devices (phone in portrait and landscape and tablet in portrait), I am trying to have a line of text above the call to action button and the logo image.

So the text on its own line would be: For more information about our Services

Then below that text, to the left of center underneath the text would be the clickable button. To the right of the clickable button (to the right of center) and still underneath the text line, would be the Frog character image.

As you may have noticed, on desktop and laptop screens, I have the text, clickable button and logo image all in line together but that only works well on larger screens. Since the 3 items all become so small if on the same line and on smaller displays, they become very hard to read.

I did follow your directions though and created a new text section at the bottom of the SERVCES page, which I titled Test #2 - Service- Call to action - Phone. I wasn’t sure if we could set things up correctly as I wanted in CSS if I followed your request or maybe you misunderstood what I was trying to accomplish. Sorry, I have to admit though, I am not sure how to add common CLASS to the call to action for mobile, as you asked. I thought I would answer you here and try to explain myself a little more clearly and we can take it from there.

Hopefully what I wrote makes sense and you can understand what I am trying to do.

Thank You

#9

Hi there,

I suggest that you have 2 section for the mobile and desktop view using the Hide/Show option:

Keep the Desktop view the way it is as you already mentioned it is working ok. But for the mobile view, I suggest that you add a separate section and add 3 rows for that section. Each row will have one column and you will add the Text and Button and the Frog image separately on those rows. That will ensure that they will stack on top of each other and they will have enough space separately for the mobile view.

For more information about the Rows of the sections I suggest that you read this article:

Thank you.

#10

Hi

I have been setting up separately the call to action sections for desktop/laptop screens and then a call to action section for mobile screens. As you may have seen in the layout structure on the SERVICES page of the site, there are sections labeled ‘For PC and Laptop’ and sections for ‘Phones’. I was having trouble getting the phone section to display properly, so that is when I opened this question to you.

Stacking the 3 parts (text, clickable button and image) to the call to action, I was able to set up easily but that is not how I want it to display. My goal was to put the text above the button and the image. I was able to put the text on its own line above and have it centered on mobile devices.

When I went to put the button and the image side by side below on their own line from the text, I ran into an issue that they would not sit on the same line together. Spacing should not be an issue because even on a phone in portrait mode, there is still a lot of free screen space to the sides of the button and the image.

To simplify things for now, I removed the text portion. If you can go to the bottom of the SERVICES page, you will see a section called ‘Test Call To Action For Phone’.

There you will see a row with 2 columns. The left column has the button, the right column has the image. If you look at this in build mode and hover the mouse over the button and image, you will see there is no unnecessary spacing around the actual image or button.

Where the problem seems to be is that the left column that contains the button, has the button justified to the left of the column. If I could move the button over to the right side of that column, that might work.

The problem is the same on the other side of the row with the right column, only in reverse. The image in the right column is justified to the right side of that column. If the image could be moved to the left side of the right column, would that help?

As I have it right now, the button and the image are on the same line on a Samsung tablet portrait mode but there is a massive space between the button and image. On the phone in both portrait and landscape, the button and image are still being forced to separate lines.

I’m sure there must be a way to have the button and the image sit on the same line when viewing on a phone in portrait. Any chance you can help?

As a side note: the interesting part is on the section I created for the desktop/laptop call to action, the button and image can sit right next to each other, with the program not forcing the large gap.

Hopefully you can help on this as I would prefer not to stack the button and image.

Thank You

#11

Hi There,

That is part of the issue, columns stack on mobile view, you should have the button and image in the same column. That means you need to set your ROW as 1 column.

That is because of the large padding you applied on side of the 1/2 columns.

Left column, 80px left padding

Right column, 70px right padding

Take a look and examine what I did to TEST CALL TO ACTION FOR PHONE section.
I placed the button and image in the same Column. I floated the image to right by adding a CLASS right to the image.

Since the button was already a left-align I’ve just added a 3em top margin to vertically position it to the column.

Hope it helps,
Cheers!

#12

Friech…you are GREAT!!!

Sorry for the delay in replying to you but I wanted to let you know that you certainly set me onto the right track…after all the hours of banging my head against the wall trying to figure this out.

Really appreciate you putting the sample test at the bottom of the page to look at and use. That showed me how to set up the basic look I was going for, I made a copy of what you did (so I wouldn’t lose what you gave me) and with the copy, I was able to work with the layout and design the call to action to how I wanted it. Things are looking much better on the mobile layouts now.

I can’t tell you enough how happy I was to get this answer from you.

THANK YOU THANK YOU…THANK YOU!!!

#13

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.