Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 17, 2020 at 11:12 am #1238447
    resting-jeppesen

    Hi!
    I’m not sure what’s happened or even if it’s something I did but my content (for examples columns) are slightly overlapping on my front page on mobile view. How can I fix this?

    I noticed that when creating a section heading (just pure text) it’s even overlapping on desktop view and only when I added whitespace did it look okay. So I’m not sure the problem is only on mobile view but it’s definitely most noticeable on mobile view.

    Hope someone can help.
    Thanks in advance. :)

    August 17, 2020 at 4:55 pm #1238544
    Victoria

    Hey Jonas,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
	.responsive #top.page-id-33  #wrap_all #after_full_slider_1 .flex_column {
		margin-bottom: 85px;
	}
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 18, 2020 at 9:46 am #1238747
    resting-jeppesen

    Thanks for replying! :)

    Unfortunately, it’s fixing it only partly. What it fixes is that the columns are looking great and evenly spaced on mobile view. That’s fantastic! :D But it also adds a wide gap between the welcome text and line separator, as well as the column with BEZZERWIZZER Ord and the small separator after that. So I guess the code adds whitespace between lots of elements but is there a way to only target in between columns so it doesn’t affect everything else?

    Do you know what could be causing the problem in the first place?

    Maybe I can add a custom class to the coloumn and target that and then add a margin on mobile view?

    August 18, 2020 at 8:45 pm #1238893
    Victoria

    Hi resting-jeppesen,

    Could you please attach some screenshots of the issue?

    You can upload screenshots to a service like Dropbox or http://imgur.com and give us the links here.

    Of course, you can add the class, it will be easier to target the elements with css.

    Best regards,
    Victoria

    August 25, 2020 at 11:15 am #1240637
    resting-jeppesen

    Here’s the mobile view:

    View post on imgur.com

    View post on imgur.com

    View post on imgur.com

    That’s WITH the code. Columns look great, as I said, but now there’s also lots of white space.
    On desktop view there’s still space issues. Where it says “HINT” as a headline, there’s too little space – actually the separator line sits UNDER the column above it so it’s not even visible on desktop.

    How can I fix it? I couldn’t get it to work by adding a class to the columns either but I’m not a coder so I probably didn’t do it right. :)

    August 30, 2020 at 12:27 pm #1241901
    Victoria

    Hi resting-jeppesen,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .hr-full, .hr-big {
      margin: 30px 0;
  }
  .flex_column_table.av-equal-height-column-flextable {
    margin-bottom: 30px !important;
  }

}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 2, 2020 at 2:55 pm #1242821
    resting-jeppesen

    I managed to fix it own my own by giving an ID to the two first columns and targeting those. For anyone else with the same problem, here’s the code:

    @media only screen and (max-width: 767px) {
#jgs-column-space-id {
margin-bottom: 85px !important;
}
}

    So you can close this thread. :) Thanks all.

    September 3, 2020 at 12:04 am #1242953
    Jordan Shannon

    Hi,

    If you need additional help please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Content overlapping in mobile view’ is closed to new replies.