Trouble making WP slideshow responsive - css

Although I just launched my website, there is only one publicly visible bug (that I know of) that I need to fix and I haven't managed on my own.
I'm running Wordpress 4.4.1 with the Corpo theme and toolkit, the latter which comes with a nice slideshow on the front page and portfolio project pages. Unfortunately, the author of the theme+plugin vanished from the earth: no longer active on the WP forums and her website/domain name is no longer renewed.
Long story short: the slider code is working responsively on the front page, but not on the project pages.
My website is located at http://www.jurjenbarel.com/
The project slider gets really ugly when you get under 540px width, because the container div is set at 540px. I can't set the container at max-width: 540px; because it will make the slideshow ridiculously small.
If someone with better knowledge of CSS has any idea on a fix, I would be very grateful!
Thanks in advance!

Related

Wordpress image slider overlay issues

I've build a WordPress website which runs the TouchFolio theme. This theme uses a plugin called Royal Slider to create the sliding image gallery featured on the main page.
http://www.suellewelyn.com.au/
https://dimsemenov.com/themes/touchfolio/
https://dimsemenov.com/plugins/royal-slider/
I've ran into an issue where the description overlay on the RoyalSlider plugin is staying active across different projects, which results in them becoming mislabelled.
To recreate the issue, if you load the page at http://www.suellewelyn.com.au/ the first work titled "Primal Intent" comes up. If you then use the left hand menu to jump directly to a project lower down the list ("Celebration" for example) the "Primal Intent" title and description stays active. I noticed that this is an issue with demo of the theme on the developer's website as well.
Does anyone have any suggestions as to how I might be able to correct this?
Just Increase z-index of your pseudo element with tint.

wordpress woocommerce image size - container is stretching the image

First of all, i will apologise for my badly written english, never really went to school. So please be nice.
I have some problems with the website im building in wordpress.
I'm are using "the7" theme.
i have set the size, of the images in the product settings, and regenerated the images, with the plugin that there is recommended. And it it's working fine in the product page. But not in my custom "webshop" page. The container, where the images is stored, is simply to big. and i cant find any way to fix it.
The URL http://www.imobile.dk/webshop/
i would like the image to be 150x150. and it is, but it's is stretched. on my computer (617x617) original is 150x150.
dose anyone has any idea, how to fix this?
i think the theme it self, is overwriting the default settings.
i really need you're guys help.
Thanks.
You can try the following: In your wp-admin go to "appearence" -> "Editor" and then put this in your style.css file:
.woo-buttons-on-img {
max-width: 150px;
}

Revolution slider parallax slow

I'm working on a Wordpress website which is completely made out of Visual Composer.
On one page I must use parallax effect which includes 4 different
sliders with one slide (I'm using it that way as the template that I've imported is looking the same as my client want).
But the thing is, parallax effect is so laggy and totally ruining the
looks. On example, the slider looks normally but when I change slider
layers than it becomes laggy. Any thoughts how to fix this?
Thx
Make sure you use the correct picture dimensions (... px x ... px)
I also compress my images before uploading it to my Wordpress website (kraken.io has a good free online tool for this)
I use W3 Total Cache (or WP Super Cache) to speed up my websites. (Don't forget to exclude the revslider in the minify js: wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.92 => number depends on you'r version or revolution slider)
There are a lot of other things to keep in mind (version Wordpress, other plugins, hosting, ...)

Wordpress website responsive won't show revolution slider on mobile version

I just finished creating this website from a theme I purchased on ThemeForest. It said to be Full-responsive, but somehow it won't display the Slider and the video on mobile, as it does in the desktop version.
I've tried looking at the css file and try to figure what might cause this, but I don't have much experience with #media. The website's address is http://topnotchweddingvideos.com/. I've also went over the documentation for the Revolution Slider and couldn't figure it out. If someone could take a look at it and suggest what I could do would me much appreciated. I don't expect anyone to do the work for me, I'm just trying to get some feedback or ideas.
P.S. It would also be good enough if I could have the video only display before About Us in the mobile version.
Change The theme!!
or reach to developers of the theme. There's problem in theme. i also have used the revolution slider in my wordpress site working 100% in mobile. your Theme is not 100% responsive

Custom mobile theme

Okay,
So I figured out on my own how to make a mobile site out of an Artisteer template.
Basically, I changed the sheet to 100% fluid width, minimum 300 px, one column, got rid of the menu and replaced it with a vertical menu, got rid of most of the blocks or put them under the vertical menu, made everything smaller and simpler. Smaller fonts, got rid of most of the padding except for 3px, made the header shorter, made the vertical menu bars tall enough to press with a finger, etc. My new mobile-friendly site looks great.
So now what? Do I export it as a WordPress theme and then have two installations of WordPress for every website?
Or do I export it as html, use a redirect WordPress plugin, an add an RSS feed?
Hmm...I think I may try html, but would love some feedback anyhow.
You definitely don't want two installations of Wordpress... double the admin overhead, duplicate content etc - not the way to go.
Easiest way IMO - and indeed, this is the way recommended by some commercial mobile theme developers - is to use a plugin like http://wordpress.org/extend/plugins/mobile-theme-switcher/ which simply detects the user agent of the client's device and switches to your mobile theme if it's a mobile device. So one Wordpress installation, two themes.
I know recommending a pluign isn't really the SO way :) - you can always look through the code and integrate it directly into your theme if you needed to.

Resources