Hi,

You need to view source to get the particular ID numbers of various elements. The code below will only target the home page

#top.home .flex_column.av_one_fourth.first.avia-builder-el-0.avia-builder-el-first {

border: 1px solid green;

}

#top.home .flex_column.av_one_fourth.avia-builder-el-4.el_after_av_one_fourth {

border: 1px solid blue;

}

#top.home .flex_column.av_one_fourth.avia-builder-el-8.el_after_av_one_fourth {

border: 1px solid orange;

}

#top.home .flex_column.av_one_fourth.avia-builder-el-12.el_after_av_one_fourth {

border: 1px solid red;

}

Please add this to your /css/custom.css or to Quick CSS

Thanks,

Nick

Hi,

You should use code like this inside a @media query since otherwise it will interfere with the responsiveness of the theme. Please look inside the custom.css file and you will see 2 empty media queries , one for monitors and tablets while the other one for smartphones and mobile phones. You will need to create another media query, and make sure that yiou lower the width of the sidebar and main content area to match the screen sizes of the media query

@media only screen and (min-width: 1050px) {

/* Add your Desktop Styles here */

.sidebar {

width: 200px !important;

}

.content, #top .fullwidth .template-blog.content {

width: 829px !important;

}

}

Please add the code above to /css/custom.css or to Quick Css.

Thanks,

Nick

Can we see your site live? It could be the content, the layer positioning or something else entirely.

If you could also create a temporary admin account for me I’ll log in and take a look.

You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn’t grab it :)

Regards,

Devin

Hi,

Your background image is fixed. Change that setting of the background image to Scroll and it will scroll up. If you make that change , then the result would look like the URL you provided as an example.

If instead what you want is for the banner to be static on top of the page during the scroll like this site for example ( http://www.labasesecrete.fr/blog/ ) , then you need to have that banner not as a background image for the entire site, but as a background image in the header.

So what you will need to do is put the header where it used to be, and then add the image to the header. Then you will need to expand the height of the header so its big enough to house the image + logo and menu.

Here is some code to start you off

.header_color .header_bg{

background-color: rgba(255, 255, 255, 0);

}

#header {

background: rgba(222, 216, 195, 0) url(https://testsite.patriotwatch.net/wp-content/uploads/2013/04/bg-for-testsite1.jpg) top center no-repeat fixed;

height: 200px;

left: 95px;

width: 100% !important;

top: 0px;

}

As I said , you need to remove the background image. This is gonna be a lot of work, But as you can see http://i.imgur.com/DvjHQqW.png with this method the page body is going under the image and that missing piece is from the shrinking header (how it originally way).

Thanks,

Nick

Hi Kianpoor,

If that isn’t working we’ll need to see your site live with the css in place. You can make it only effect your home page by adding this:

#top.home content {

padding-top: 10px;

padding: bottom: 10px;

}

Regards,

Devin

Hi bevlogenverf,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

#top .main_color .active_tab {

background-color: #333;

}

Regards,

Devin

Hi,

You officially have the slowest site I have visited this year. http://www.webpagetest.org/result/130812_XP_N9Z/1/details/

It takes 15 seconds of wait before your website even displays something when it normally should take 1.5-2.5 seconds. which tells me that you are either being hosted on the world’s most busiest and oversold server in Botswana or you pay 50 cents a year for hosting.

What I can guarantee is that based on that speed (you are slower than 99.999% of websites), Google will give you a huge penalty in search results since speed is one of the important components of how it ranks websites. Also, most people will not wait nearly 2 minutes for a website to load since a recent poll showed that 20% of visitors refuse to even wait over 3 seconds.

You put in a lot of time and thought into this (i put in some as well, lol) so here is what you should do.

1) Get an FTP program and connect to your /wp-content/uploads/ folder and find there the folders which contain images. Download them all to your desktop. then you should optimize them. Please remember that JPG format is made for photos , for big sized images and PNG format is more for vector/digital art , transparencies and small objects like buttons, etc…

No image at all should be over 100K that loads with the page. Each page should be no more than 1.5Megs maximum. (Yours http://www.ancientskies.info/ancientskies/ancient_skies_multimedia_gallery/ is 15 Megs which makes it about 1/2 the size of the browser you are using).

—-FOR PNG

for png optimization please go here http://tinypng.org/ and 20 at a time , optimize all the images found in the folder i mentioned above.

—FOR JPG

Go here http://jpeg-optimizer.com/ (it has a resizer, but if you do not need that, just unclick the checkbox for size but keep the optimization settings how the website advices (only 2 choices so its easy).

When you are done with the images, and emptied any cache you may have , run the test from the website i first mentioned.

—-Please install a cache plugin Super Cache and configure it after your launch *(do not use this while developing or you will not see the changes you made).

Only at that point if the time to first byte remains higher than 1 second would I contact your host to explain why you keep seeing turtles and snails consistently outrun you.

the issue you are experiencing (and me as well when i try to view your site using chrome dev tools) is directly related to this issue since you are still loading things 90 seconds after connecting.)

Each ‘thumbnail’ on that page is over 400K in size when they should be 20-40k. Photoshop is horrible at optimizing images since the do not do lossless optimisation just lossy (and not very well).

Thanks,

Nick

Hi,

Please add the css below to Quick CSS or to /css/custom.css

@media only screen and (max-width:989px) and (min-width:768px) {

.responsive .mobile_slide_out .logo img {

position:relative;

right:5px;

top:-6px;

}

.main_menu {

bottom:-40px;

right:-20px;

}

.main_menu .menu ul {

position:absolute;

top:85px;

}

li .avia-menu-fx,.current-menu-item>a>.avia-menu-fx,li .current_page_item>a>.avia-menu-fx {

position:absolute;

top:84px;

}

li:hover .avia-menu-fx,.current-menu-item>a>.avia-menu-fx,li:hover .current_page_item>a>.avia-menu-fx {

position:absolute;

top: 84px;

}

}

if you need to change things simply use this as a template

Thanks,

Nick

Hi designprime,

1 – We’ll need to see an example of what you mean live. The images should all have a max width set on them but that doesn’t work in IE8.

2 – Seeing an example live so we can see your version and inspect the code live should shed some light on whats happening. May need to do something specific to IE8 if the container is breaking.

3 – This was a bug fixed a version or two ago so if you have not updated recently, then doing so should fix this.

4 – You can set css specific to browser size using media queries. In the custom.css file we actually have a desktop specific and non-desktop specific media query already set up for you to add your own css to it. You can then define specific heights for elements only on mobile.

5 – We don’t have any topics that are over 2 days old with no replies by us right now and typically never have anything over 1 day old. Every single topic asked here gets answered unless the user solves it before we have a chance to answer. See: https://kriesi.at/support/topic/set-size-of-video-content

Regards,

Devin

Hi Jorge,

Terribly sorry for the delay. It’s my fault entirely and I apologize to you.

1) This will remove the scroll bar , please add it to quick css located in enfold > (theme options) > styling layout at bottom of page … the text area…. OR.. you can paste it to the bottom of the /cs//custom.css file

#top .widget ul {

margin-left: 4px !important;

}

2) The reason for the difference is that one type of button is actually a button (the html input button element for forms) while the other is a pseudo-button – basically a div and style html elements that are made up to resemble and act as a button..

So you like the look as the blue button on your website in the footer ‘Enviar’ ?

Well the easiest thing to do would be for you to add the following structure whenever you want to create a button such as this. It may not be a short-code but here you go. Please add this to quick css (see above for instructions)

#top .new-button .blue-btn{

background-color: #2F83CC;

color: #FFF;

border-color: #2F83CC;

margin: 0;

padding: 16px 50px;

border-radius: 2px;

cursor: pointer;

border: none;

-webkit-font-smoothing: antialiased;

-webkit-appearance: none;

-ms-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

#top .new-button .blue-btn:hover {

background-color: #AAA;

color: #222;

border-color: #AAA;

}

#top .new-button {

margin: 10px;

padding: 22px 0px;

border-radius: 53px;

cursor: pointer;

border: 1px;

-webkit-font-smoothing: antialiased;

-webkit-appearance: none;

-ms-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

width: 100px;

}

and when you need that blue button just add the following to your editor (in text view) You will need to replace (1) URL (2) What the Button Should say

<a href="HTTP://WWW.REPLACE.ME"><div class='new-button'><span class='blue-btn'>CLICK ME REPLACE</span></div>

Thanks,

Nick