[ahmetsali]

Hi, it is not possible to set img src attribute via css. You can switch background images via css.

But it is possible to set src attr of an image with js;

$(function() {
  if($(window).width() < 479) {
       $('.title img').attr('src','small-image-url-here.png');
}
});

[ahmetsali]

Hi, i am not sure if it will be usable but you can try the custom css below;

@media screen and (max-width: 767px) { 
 .mobile-nav, #header nav:after { display:none; }
 #header nav ul { display:none; }
 #header nav ul:after, #header nav ul:before { display: none;}
 #header nav ul span:before, #header nav ul span:after { display: none;}
 #header nav ul span { margin-top:0.5em; }
 #header nav ul span { padding: 0 0.4 em; font-size: 0.9em; }
}

[ahmetsali]

Hi, i see, then we need to change the footer markup a bit, then style it via css for desktop and mobile;

<!-- ************************ PAGES -->
<div id="footer" >
   <p>Copyright Text</p>
</div>

then style footer via css;

#footer { position:absolute; bottom:0; left:0; width:100%; text-align:center; }
.safe-mod #footer { position: static; margin: 1em 0; }

[ahmetsali]

Hi, just found a solution for this, edit js/main.js in a text editor, find line : 535, change this;

			onComplete : function() {
				hideLoader(); 
			},

to this;

			onComplete : function() {
				if ($(this).attr('href').indexOf("soundcloud.com") >= 0) {
					$('#fancybox-content').height(166);
				}
				hideLoader(); 
			},

Also this feature will be in the next update. Thanks for the feedback.

[ahmetsali]

Yes, it looks like mobile browsers are not good with fixed elements/backgrounds. However the last css code i provided, i tested on android 4+, and iphone 4-5, it was working fine.

[ahmetsali]

Thanks for the rating.

[ahmetsali]

Hi, we are getting jquery script from google cdn, and on line : 48 we provide a fallback script for jquery if somehow google cdn can’t load jquery, then it should load local jquery script file. And that script causes false alert when using the page with dreamweaver template files. Just ignore that error, it is not a real alert. The code is correct, it doesn’t raise any errors when not using dreamweaver template files.

[ahmetsali]

Hi, what browser/platform are you testing on? It might be a browser specific bug.

[ahmetsali]

Hi,

1-) Fancybox doesn’t resize souncloud embed frame when you resize the browser, but if you reload the page when it is narrow, it will fit soundcloud frame to the viewport, so this shouldn’t be a real problem, it will look fitting to viewport on mobile devices.

2-) You have set your lightbox portfolio items as a lightbox gallery so navigation buttons appears on lightboxes and block frame content, if you define each lightbox as single lightbox, nav buttons will not be seen, to do this assign every portfolio item a different value for data-lightbox-gallery attribute as;

data-lightbox-gallery="fancybox-item-02"
data-lightbox-gallery="fancybox-item-03"

[ahmetsali]

Do you want to have dark background color for body, then you can use one of predefined colors in css/skins/background/ folder, or you can give any color to body background like this;

body { background:  #ddd; }

[ahmetsali]

I checked on android 4.0 and 4.1, and it was fine. I guess some mobile browsers are not good with fixed elements.

[ahmetsali]

What is the android version of your DROID Razr MAXX ?

[ahmetsali]

Hi, it looks like css background-attachment: fixed property is not supported on some mobile devices. You can use this custom css code, that should work.

body:before { background: url('images/bckg/office.jpg'); content: ""; position:fixed; z-index:-1; width:100%; height:100%; top:0; bottom:0; left:0; right:0; background-size:cover; background-attachment:fixed; background-repeat: no-repeat; }

[ahmetsali]

Hi, it looks like css background-attachment: fixed property is not supported on some mobile devices. You can use this css code, that should work.

body:before { background: url('images/bckg/office.jpg'); content: ""; position:fixed; z-index:-1; width:100%; height:100%; top:0; bottom:0; left:0; right:0; background-size:cover; background-attachment:fixed; background-repeat: no-repeat; }

[ahmetsali]

Hi,

1-) You can put your text in a div with some extra stylings like this;

<div style="max-width:250px; margin-left:auto; margin-right:auto;">
   <p>Some text.</p>
</div>

2-) To change slider duration and animation speed, in main.js line: 2, change values in ms.

//flex slider timings
var slideTime = 4000;
var animSpeed = 600;

[ahmetsali]

Hi, i just tested your site on iphone4/5, it looks fine, background is fixed. One small tip : you may reduce your bg image to max 1920px with to increase mobile performace.

[ahmetsali]

Try to put it at the bottom, if it doesn’t work, if you provide a link i can check whats wrong.

[ahmetsali]

Hi, check out this post;

http://www.pixelwars.org/forums/topic/no-background-scroll-on-mobile-devices/

[ahmetsali]

Hi, you can try the custom css code below;

body { background-attachment:fixed; }

[ahmetsali]

Thanks, i am glad you liked our template.

[ahmetsali]

That’s super weird, clicking on a portfolio filter, jumps back to home page. I just checked our preview site, and it is working normally. Maybe you have something wrong with your portfolio filter markup. If you provide a url, i can check what’s wrong.

[ahmetsali]

Hi, yes this effects all devices, so we need to edit script to go into safe mode if any android device is detected. In main.js: line 60, you will see this line of code;

	safeMod = safeMod || mobileSafeMod || !Modernizr.csstransforms || !Modernizr.csstransforms3d || ios5;

change that line to this, and see if it works.

        var ua = navigator.userAgent.toLowerCase();
        var isAndroid = ua.indexOf("android") > -1;
	safeMod = safeMod || mobileSafeMod || !Modernizr.csstransforms || !Modernizr.csstransforms3d || ios5 || isAndroid;

Side not; android version was 4.1.1 on Nexus7 i tested.

[ahmetsali]

Hi, i don’t have a Nexus7 tablet, but i tested it via browserstack.com on Nexus7 emulator. And it works fine with 3d layout activated as i see. Can you open the safe-mod from html data attribute and try again. If it works fine we can force it to go into safe mod on android tablets.

<html data-safeMod="true"

[ahmetsali]

Hi, you don’t have to re-create your menu after each update, you just need to select your created menu from “Theme Locations” dropdown menu in “Appeareance > Menus”.

[ahmetsali]

Hi, sorry we have not tested the theme with jetpack.

[ahmetsali]

Hi, your bootstrap.min.css file is different than the original one comes with the template. And your bootsrap version doesn’t include responsive styles (@media queries). Actually you don’t need to update bootstrap at all. Also this template uses 12 colums grid system in bootstrap. Your columns count in about me page is 14 columns (span3 + span6 + span5). You need to adjust columns in each page not to overflow 12 column.

[ahmetsali]

Hi, latest portfolio items are ordered by creation date. Navigate to “Portfolio” in wp admin, then click on “Quick Edit” on a portfolio post you want to change order, then change date to more recent date if you want to show that portfolio item at first. You can play with other portfolio post’s dates and reorder portfolio items as you want.

[ahmetsali]

Hi, i can recommend to use custom background image with overlay extra skin enabled. Also overlay.css have some extra stylings for custom background images, to not to repeat etc.. such as;

body { background-size:cover; }

Also an image resolution with bigger than 1024x768px should be fine, bigger resolution is better.

[ahmetsali]

Hi, we will fix it in the next update, thanks for the feedback.

[ahmetsali]

Hi, firstly paste the code below to the “External Stylesheet/JavaScript” box located under “Appearance / Theme Options / Style tab”;

<script>
	$(function() {
		$('#header .wrapper').prepend($('#header .title'));
	});
</script>

Then copy the code below to the “Custom CSS” box;

#header .title { margin-left:0px; margin-right: 30px; }

[ahmetsali]

I see, but when i look at the source code, in main.js you have placed $('table').footable(); snippet at line:69, you need to move that code snippet about line:120 to make sure it is being called after page has been shown. Also you can try to call the $('table').footable(); function with some delay, like this;

setTimeout(function() { $('table').footable(); }, 500);

[ahmetsali]

I just checked your site again, when i resize the browser below 768px, table expand script is working as it should as i see it now.

[ahmetsali]

You have an extra closing bracket in your code;

$('html').removeClass('no-overflow').addClass('safe-mod');	
		
		setActivePage();
		$.address.change(function() {
			setActivePage();
			$(‘table’).footable();
			}  // ***remove this line
			
			});
		
	}

also you have inserted $(‘table’).footable(); code snippet in line: 69 in main.js. You may need to insert it just before the closing bracket in line: 131, in order to work prorperly.

[ahmetsali]

Hi, you can try to reinitialize that $(‘table’).footable(); function call just before the closing bracket of setActivePage() function in main.js between line 74 – 125.

        // CHANGE PAGE
	function setActivePage() {
            
            ...

            $(‘table’).footable();    // line: 120
       }

[ahmetsali]

Are you testing on local machine? If yes, upload to server then try again, ajax may not work proper on local machine.

[ahmetsali]

Hi, can you provide a url to see what’s wrong.

[ahmetsali]

Hi, i tested on chrome 23 on win7, and scroll works just fine. I also tested on browserstack.com ( win8 + chrome 22), layout goes to classic layout(safe mode), but scrolling works fine too. If i get the change to test it on win8 + chrome 23, i may able to detect what’s wrong.

[ahmetsali]

Hi, i just checked your homepage. Your images are optimized, but you have too many images in slider, that makes your page load slower. Slider is intented for showing featured images only (max 10 images) you have more than 50 images in your slider.

[ahmetsali]

Hi, please provide a live preview link to see what’s wrong.

[ahmetsali]

Hi, it is not possible to remove that keyword. Instead if you change the slug of the portfolio page to anything else such as “work”, your url will become http://francyz.com/#/work/portfolio/set-liliana/ .

[ahmetsali]

We used iscroll for scollbar replacement in this theme, and it brings a mobile like scrolling approach to desktops too, there is no alternate solution for that.

[ahmetsali]

Hi, this is the default behaviour in browsers. But you can force to page scroll to top on page load with javascript. Paste the code below to “External Javascript” box under style Tab in theme settings and see if it works for you.

<script>
   $(function() { $("body").scrollTop(0); });
</script>

[ahmetsali]

Hi, you can style dropdown links as;

#nav ul li a { color: #fff; }

[ahmetsali]

Hi, yes it breaks in IE8, but we have fixed this issue with v1.2.1. Please download and update to latest version. Also see changelog.txt.

[ahmetsali]

Hi, can you be more specific, on what platforms/browsers it breaks? Normally it should just fallback to classic layout on non supported platforms.

[ahmetsali]

Hi, i just checked your site on your new server, portfolio page works fine to me. I guess you have solved your problem.

[ahmetsali]

Hi, i see, update the code as;

<script>
$(function() {

   $('#filters li').first().remove();
   $('#filters li').first().addClass('current');

  //**********************************
  // PORTFOLIO FILTERING - ISOTOPE
  // cache container
  var $container = $('#portfolio');
  var $firstFilter = $('#filters li.current a').attr('data-filter');
  var $firstCategory = $container.find('.item' + $firstFilter);	
  if($container.length) {

   $container.find('.item:not(' + $firstFilter + ')').hide();
   
   $firstCategory.waitForImages(function() {

     //initialize isotope
     $container.isotope({
	itemSelector : '.item',
	layoutMode : 'fitRows',
        filter : $firstFilter
     });    
    
     $container.find('.item:not(' + $firstFilter + ')').show();  
   
   },null,true);
   }
   //**********************************

});
</script>

[ahmetsali]

Hi, i just checked your images in portfolio page, some of them has too big resolution over 2000px, but the main problem is they are in png format and the size is over 1mb for an image. You can convert them to jpg format, then average image size will be 200kb. That will speed up your portfolio 5x.

[ahmetsali]

Hi, for contact page, find this html markup;

<div class="contact-info">
    <p><i class="icon-map-marker"></i>795 Folsom Ave, Suite 700 San Francisco, CA 94107</p>
    <p><i class="icon-time"></i><b>Tel:</b> 999 888 77 66</p>
    <p><i class="icon-print"></i><b>Fax:</b> 999 888 77 66</p>
    <p><i class="icon-envelope"></i><b>E-Mail:</b> info@company.com</p>
</div>

and change it to this;

<div class="contact-info">
    <p><i class="icon-map-marker icon-white"></i>795 Folsom Ave, Suite 700 San Francisco, CA 94107</p>
    <p><i class="icon-time icon-white"></i><b>Tel:</b> 999 888 77 66</p>
    <p><i class="icon-print icon-white"></i><b>Fax:</b> 999 888 77 66</p>
    <p><i class="icon-envelope icon-white"></i><b>E-Mail:</b> info@company.com</p>
</div>

[ahmetsali]

Hi, you can add new pages in the same way you add About, Resume or Contact page. using “ivCard-Custom Page” widget.