Overlapping sections on smaller screen size

Support
#1

Hi there, I’m having major issues with screen size affecting page layout including overlapping sections and large white spaces when the browser window size is reduced.

The issue was introduced when I began using negative offsets for the right-hand sidebar to achieve the desired aesthetic. Then I needed to introduce an offset to the rest of the sections below to make everything line up. But now when you reduce the browser window width, a lot of the page structure breaks down.

Please could you guide me on how to keep the right hand sidebar aesthetic (overlapping with the top row) whilst keeping the rest of the page structure with smaller page widths.

Thanks!

#2

Hi @clearspark,

Thank you for writing in, but the site you shared looks fine in mobile on my end (see screenshot). Please clarify how we can see the issue.

Do you use custom CSS for applying the negative offsets? If so, please wrap your custom CSS with @media (min-width: 768px) query, so it does not affect the mobile view.

@media (min-width: 768px) {
	/*CUSTOM CSS HERE*/
}

Cheers!

#3

Oops, it redirected to the old page because you weren’t logged in! I will send login details in a private response below so you can see the page I’m referring to.

#4

Hi,

The login provided, doesn’t seem to work.

It says ERROR: Invalid email address.

Kindly check again and let us know.

Thansk

#5

Sorry, username and password updated in the secure note.

#6

Hello @clearspark,

I have logged in and inspected your site. I could not replicate any issue.
This is what I am seeing:

Could you please provide a screenshot of what is going in your browser?

Thank you in advance.

#7

It looks ok on a full size monitor, but as you reduce the width of the browser window, the problems become apparent. Issues described below.

https://imgur.com/a/Y40KLvD (3 images)

  1. The space above “Who is this course for” text gets larger as the window size decreases.

  2. “Course content” text overlaps with sidebar section on narrow window or on a mobile device.

  3. Part of the sidebar is obscured when you select page 4 of the table because the table height reduces and the sections become overlapped.

  4. There is a large blank space at the bottom of the page because of the section offsets.

Thanks.

#8

Hello @clearspark,

Because of your section layout, the space above the “Who Is This Course For?” is quite normal. If you do not want spaces, then “Who Is This Course For?”, “Course Content”, etc. should be added in the same column as with the “What You’ll Learn”. Your final layout would then be two columns which displays the sidebar on the right side.

Hope this make sense.

#9

I think I understand what you’re suggesting, but how would I achieve the layout for the 4 ‘Who is this course for’ items, which currently require 3 columns - 2 for the content and 1 for the sidebar?

#10

Hi @clearspark,

Try using a global block element, it’s basically a content builder for a content you can insert anywhere. Please check this https://theme.co/apex/forum/t/global-blocks/24723.

With that, you can create 2 content (global block) for the first column, then use the second column for the sidebar.

Thanks!

#11

Thank-you, that worked.

However, when I replace the sidebar with a global block, I’m unable to make the block full to the full width of the right hand column (see image). I’ve set all padding and margins to 0 for the section, row and global block. How can I make the global block width = 100% of the column width?

Thanks.

[Album] Imgur

#12

Found the answer - turned off the ‘Inner container’ in the row of the global block. I think this thread is good to close now :slight_smile:

#13

Hey @clearspark,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

#14

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