Adding border around entire site

Support
#1

Hello!

Im trying to add a border around my site. But I cant figure out how to make it be responsive. It gets messed up when i change my screen size.

Im trying to achieve this look: http://preview.themeforest.net/item/the-fox-contemporary-magazine-theme-for-creators/full_screen_preview/11103012?_ga=2.62790636.1376221718.1515964315-19018793.1515334875

I used this:

div#bordertop {
    height: 1px;
    position: relative;
    z-index: 1000;
    left: 0px;
    right: 0px;
    top: 0px;
    background: black;
	max-width: 900px !important;
}

div#borderbottom {
    height: 2px;
    z-index: 9999999;
    left: 0px;
    right: 0px;
    bottom: 402px;
	background: black;
	max-width: 900px;
}
div#borderleft {
    width: 3px;
    position: fixed;
    z-index: 9999999;
    left: 133px;
    top: 0px;
    bottom: 0px;
    background: black;
	    display: block;
}
div#borderright {
    width: 3px;
    position: fixed;
    z-index: 9999999;
    right: 133px;
    top: 0px;
    bottom: 0px;
    background: black;
}

This is my site: https://palilastudio.com
Any suggestions??
Thank you!
Rena

#2

Hi there,
The website is under construction and I could not see the site to be able to give you proper help. kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Meanwhile, you need to go to X > Launch > Options > Layout and Design and make sure that the site has a container and set proper options there. Then you will have the container at hand and you can then use some custom CSS for the border.

Thank you.

#3

Hi,
Thank you. Sorry about that. I have turned off the “under construction” Also I went to layout and design and its set to boxed, full width. Is boxed the same as container?

Rena

#4

Hey There,

Please delete your custom CSS and try with this CSS instead:

body {
    padding: 15px;
}
#x-site {
    border: 4px solid #000;
    max-width: 1024px;
}

Let us know how it goes!

#5

Hi Thai,
WOW thats amazing. I was really taking the complicated route there. Thank you!

Can you tell me, Im using the Pro header and its not responsive. Its overlapping the box when i resize my screen. How do I make the text in the Pro header responsive?
THANKS AGAIN!
Rena

#6

Hi Rena,

You have to hide the Navigation Inline element from the mobile version.

After that add the Navigation Dropdown element (set it display on the mobile version only).

Hope it helps :slight_smile:

#7

Thank you, that does help me for the menu. But for the big words “Long Island SEO” they do not resize. How do I handle that?

#8

Hi Rena,

You can do the same with the Long Island SEO elements.

You will set the element multiple times with different sizes and hide for all screen widths on the Customize tab of the element, but the screen width you want to show.

So for example, you would diplicate this element, hide the original for mobile and tablets, and set the font much smaller for the duplicated version and hide for desktop and laptops.

Hope it helps!

#9

Thank you!

#10

You’re welcome!

#11

Hello Nabeel,
You recently helped me add a border around my site, which worked perfectly with the code pasted below. My question is how can I apply this only to the home page? Appreciate the help!
Rena

body {
padding: 15px;
}
#x-site {
border: 4px solid #000;
max-width: 1024px;
}

#12

Hi there,

You’ll have to use the .home selector, like this

body.home {
    padding: 15px;
}
.home #x-site {
    border: 4px solid #000;
    max-width: 1024px;
}

Hope this helps :slight_smile:

#13

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