When working on my computer in different browsers my homepage layout (I have four steps to follow for users with action buttons beneath each block) looks fine in the full, desktop or laptop resting state. However, the client’s computer (actually two of them) have one of the buttons showing up lower than the others and has been difficult trying to figure out how to get them to line up.
I did notice that when resizing the browser the blocks of text get uneven (whether or not the text is justified or plain). I told the client that for most people, they would arrive at the site on whatever device that they are using and that most wouldn’t be resizing the browser as much as we are. However, he’s still having trouble in its resting ‘full view’ state.
I tried wrapping each block of text in a div using the four column shortcode for those four blocks. Then entering the whitespace shortcode to clear that information. Then placed the buttons beneath in four corresponding columns which made it look fine in the full view state but when resizing the browser the two blocks separate. Text up above. Images below.
Long and short of it is I’ve tried many things. My text is justified. But the issue remains even when it is not.
The first and most important thing is to see if there is a command or line of code that I can insert to separate the text blocks and the image pngs/buttons so that everything in its resting state lines up.
The second question is what is the default width for tablets so that I can support my claim that even though we’re seeing it uneven, it won’t be experienced that way by a user visiting the site directly from a device.
The last question is about whether or not there is a command line of code, or suggestion that you might have that can help.
The topic ‘Having trouble with the homepage Welcome block lining up right when resizing.’ is closed to new replies.