How can i make my website Responsive?

My Top Banner under nav menu and nav menu and side menu button are not responsive , please help! any guidance will be appreciated!

Hi there,

You used the background video in a section with a fixed height. That is the natural state which the video tries to fit itself to the specific height and it cuts off.

You need to have a fluid height section which it will shrink when the browser window is getting smaller. That is why I suggest that you change the way you added the video. Add a section without any height restriction and add a Video Element there containing the video in question.

To make the video element full width you need to go to the Row settings of the section in question and enable the Marginless and without container options:

I am not sure about other sections of the website. Please open up a separate thread for each part and give us detailed information width screenshots so that we can follow up the case for you.

Please kindly consider that all the original theme elements and parts are responsive. So whatever you see is not responsive is either a setting that you have done or a custom code which needs to be checked.

Thank you.

it not looks good at all, i have tried what you told me, screenshot attached in secure note
even the top nav ubermenu is messed up

  1. the banner - maybe its because i have put inside the colum in the section a transparent image just to make a space inside of it, i cant find a way to full fit the banner in the whole section without the transparent image
  2. how exacly i can make the top nav ubermenu responsive aswell?
  3. also the headline is messed up

Hi there,

You did not follow what I mentioned. I installed a plugin called Duplicate Post And cloned your homepage. I deleted all the sections and added a section which includes a video player element with the video you have and the options I mentioned in my response please check.

Also, there are many problems when it comes to your homepage in the CSS section you added a Javascript code which throws lots of errors and you have a huge amount of 3rd party plugins and heavy Javascript code that it makes the page very slow and not possible to edit easily.

For the headline, you used a Text element. You will need to use the Responsive text to add proper responsive view. Please read the article below for more information:

To access the responsive text options you will need to click on the settings icon in the Cornerstone and click the Responsive Text tab:

Thank you.

hey thank you but i cant put this as a banner it has a white top and buttom white spaces…it does responsive but its not banner as i want, i dont want banner like this it has white empty spaces on top and buttom of it, i need it to be clean with solid golden border :frowning:
and also the uber menu is responsivly bugged, i mean that the ubermenues responsive breakpoint is too early or someting like that, how can i change that? :frowning:
and now from some reason it wont let me edit the homepage, it wont show me the sections, something happend so i had to disable the plugin your installed and then it got fixed

Hi There,

To change Ubermenu responsive breakpoint, see this guide:

Can you give us screenshot of issue with white empty space? At what screensize you are seeing this one? Note that background video will not work on mobile.

1 Like

Thanks, regarding to the ubermenu, i fixed the issue.

and the video screenshot attached in secure note.
cant i put the banner in a section? right now my banner are on sections, but i have put a transparent image so the banner will be in hit normal size. the transparent image ruins the responsibility.

Hi There,

Did you get that screenshot from your current homepage?
See secure notes for my testing. There’s no white space. I even reread the entire thread to see if I missed some information. But my testing shows it is fine.

thats funyy, im sorry but you went to the homepage, the link is the homepage clone.
adding link in secure note

Hi there,

That space is from section’s padding and video spacing. Please inspect your section where the video is and set its padding to zero.

Then inspect your video element and go to Frame section, then find the Content Aspect Ratio option and change it to 575 : 141

Hope this helps.

have you entered the page with the login credentials because what you are saying is impossible to do, its a class video element

Hello There,

Thanks for updating in! I have checked the page and it turns out that you are using the video as a section background video. Please set a minimum height of the section to leave a minimum amount of space for the video to display. Adding your transparent image in the column is not enough.

It also turns out that the whole section container is hidden in smaller screens. Please edit your page in Cornerstone and click the section. Find the “Customize” tab and make sure that you have disable the “Hide During Breakpoints” option of the section because this makes the section.

Hope this helps.

1 Like

ok thanks but how exacly do i set the minimum height of the section?
how exacly can i display a section background on its full size only without content inside

update: i have set the section top padding to 150 and buttom padding to 100, and its in the correct size but it is not responsive yet

Hi There,

Try this custom CSS too:

.e2232-10 .x-video .x-video-inner video {
    width: 100% !important;
    height: auto !important;
}
@media (max-width: 900px){
.e2232-10.x-section {
   padding: 91px 0px 100px 0px !important;
}
}
@media (max-width: 850px){
.e2232-10.x-section {
   padding: 78px 0px 100px 0px !important;
}
}

Adjust the padding per media screen 1width.

Hope this helps.

i have tried this, it does not effect anything so i deleted it again.

Hi there,

I need to mention that the background video will not be responsive as you can not have a fluid height in a section. The background nature is that it tries to fit itself to the container, and if the container has a fixed height it will cut off in sections that the aspect ratio does not apply. So I know my colleagues tried to give some suggestions to somehow change that but the fact is it is not possible to do so. You need to forget about the background video and responsiveness.

The problem you are experiencing regarding the white space when used the Video element is caused by the slider that you have at the top of the page. I deactivated the Slider in the Below The Masthead section and deleted the section which had a background in the Homepage Cloned. Now if you check the page you will see a responsive full-width video section.

You need to look into your slider and see why it imposes such a white space. Thank you.

thank you for your reply but nothing has changed, the video is not visible on small sizes of responsivness, and there is still white space above it.
but if i use the video as a section background its all fine but i cant find a way to resize the section to the video

Hi there,

It was working when I created the page. There are lots of Javascript errors happening all because of extra Javascript code you added to the X > Theme Options > JS.

Also I can not enter your website either the password is changed or you added a new under construction stuff with another password.

I repeat, you need to forget about the background video if you want to have a responsive case.

I will need the updated login information to add a completely new page and add the correct information. Thank you.

the website was under maintenance now it is available,

  • when i use section background it make it responsive but i cant fit the background to its whole size, how can i do this?

Going to the standard WordPress login URL redirects me to a 404 page. Please give us your login URL. I can’t see your login URL in this thread and your other threads.

Thanks.

1 Like