Text goes to bottom of elements

Support
#1

I am building a page with pro and whenever I am adding text into a element it makes a big space and goes to the bottom. I checked all my padding and margins and none of that is doing it. The website is http://marlinswildlifesafari.com.

#2

Hi @MrPlank,

I can’t access your site at the moment because it’s seems under construction. Please provide your admin credentials and the page where this issue exist using a secure note so we can check your setup.

#3

The text problem went and fixed it self now but I am having problems with my social media links not working in my header and I will open it so you can see it.

#4

Hey @MrPlank,

Looks like there is something wrong with URLs you have entered. Just remove # from URLs and add https:// in facebook link.

Regards

#5

Thought I had tried it without the # but must still not have something right. They all work now.

#6

Glad to hear it’s sorted now.

Cheers!

#7

I am utilizing to social element for a “quick links” in my footer, but can’t get them to line up side my side. Instead, they stack. Could you take a look and maybe let me know where I’m going wrong in all of this?

#8

Got all the above stuff fixed, but now I have a problem that my whole website wants to scroll to the left side and it will come completely off the screen. I do have a background image I tried taking it off and it did not fix and I also have a revolutionary slider on the home page and I turned it off and it still did it fix it.

#9

Aslo I would like to have my slider the same width as the body of the website and I tried many different ways to do it but I have not found a way to make it the same width and keeping the picture ratio right. I am using revolutionary slider for it.

#10

Hi again,

  1. To fix the scrolling problem please add the following code in your Customizer:

     @media screen and (max-width: 979px) {
 	.x-content-sidebar-active .x-container.main:before, .x-sidebar-content-active .x-container.main:before {
 		left: 0;
 	}
 	.site {
 		background: #fff;
 	}
 	.x-content-sidebar-active .x-container.main:before {
 		right: 0;
 	}
 	.x-container.main:before {
 		width: 100%;
 	}
 }

  2. To make slider full width, use this code:

     .tp-bgimg.defaultimg {
     background-size: cover !important;
 }

Hope this helps!

#11

I put the code in the customizer and it did not fix the scrolling. Also the slider I want boxed the same with as the body.

#12

Hi again,

  1. I couldn’t replicate the scrolling issue on my end now. Can you please provide some screenshots or a video recording so we can take a closer look?

  2. For slider part, please update previous code to this:

     .tp-bgimg.defaultimg {
     background-size: cover !important;
     width: 90%;
     max-width: 1220px;
     margin: 0 auto;
 }

Let us know how this goes!

#13

That worked for the width of the slider and would there be a way to make it taller too. the way it is now it is cropping my images but I can work with.

As far as the scrolling it does it with safari browser and then on chrome browser it does not scroll but only shows the background image in the header part and not the whole website.

#14

Hi again,

For the scrolling issue, try adding this code:

.x-content-sidebar-active .x-container.main:before, .x-sidebar-content-active .x-container.main:before {
		left: 0;
}
.site {
	background: #fff;
}
.x-content-sidebar-active .x-container.main:before {
	right: 0;
}
.x-container.main:before {
	width: 100%;
}

Let us know how this goes!

#15

I went changed the background color to transparent and everything works great now.

#16

Glad to hear that. :slight_smile:

#17

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