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 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

Edit: As Nick said above, you can definitely try regenerating the images as well in case they just need to have the thumbnails actually generated.

The image on that blog post is still not pulling from a re-sized thumbnail image.

There is still something not working incorrectly with the default installation it seems. I would suggest deactiving all active plugins and drop-ins and then re-downloading the theme from ThemeForest so you have a fresh copy with the newest updates. Then re-install the theme via ftp making sure there are no errors with the file upload and then testing things out again.

Hi,

Please use this css and place it into quick css or /css/custom.css

.big-preview {

padding: 0 0px 0px 0px;

}

Your problem is that the theme should be resizing that image to a proper size and instead it doesnt do that. Normally the square image shape is attached to this location. So what you need to do is install Simple Image Sizes plugin http://wordpress.org/plugins/simple-image-sizes/ and then go to Settings > Media find the square image settings (or whichever you changed to) , and make the settings have a set width of 710px and make the height 9999px and make sure that there is no crop. Always upload images wider than 710px and you will have no problems since the height will also resize proportionally to the 710 width and will look fine.

Do the same for gallery on Settings > Media (dont forget to install the plugin , it will save you hours of frustration)

Thanks,

Nick

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

Hi,

Had a problem finding your email since you never told me you contacted me in the past via email, so this last email was filtered elsewhere.

In any case let me post the portion of the email here that I think you wont object to;

You said the following are the current issues:

1) Finding a way to fix the height of the iconbox area when in a column

2) When you rollover an image inserted into an iconbox there is a span which expands and pushes the content down.

3) In IE, images added into an iconbox also stretch vertically out of perspective.

4) In IE8, promo boxes don’t display properly and buttons float over text

That’s about all our major problems, but the main one is the whole height issue with the iconboxes and if you haven’t time to help with the other issues don’t worry.

I will answer them one at a time:

1) ..working on now

2)

3)

4)

Thanks,

Nick

No there isn’t. It depends on the width you’ve chosen in the General Settings as well since that changes the whole container size.

The size of image you choose is what gets loaded into the layout. This can be really helpful if you want to use a different crop to keep an overly tall image or group of images to fit a square layout or a just generally show as thumbnails

The layout then makes adjustments to fit the viewers devices (full size desktop down to mobile). So if you choose an image that is 300px wide and your choice of gallery is the large single image like in this screenshot http://webex.gr/1.jpg , you’ll get a pixelated result.

It doesn’t usually come up as most users are already starting with a larger image. Even more so to make sure things look reasonable on the new retina screens.

If you just want to add in a single image however and don’t want it to scale then you don’t need to use a gallery at all. Just use a text section and add the image into the visual editor.