Greetings!
I am using wordpress Blog site http://www.seoindiarank.com . I am facing a problem with it into slider. The slider was showing full size but now it's not showing full height, Even I try other sliders too but all slider are showing same width and height.
I want to show slider as 2000px by 550px. But it's need to be mobile friendly too.
I hope friends will help me in my great problem.
Regards,
Sam
I would recommend using viewport or % width to make it mobile friendly. In terms of displaying the correct height, viewport and % heights do a much better job with finished aesthetics.
Related
I'm pretty new to web development and I'm having trouble making a website that I've created for my portfolio responsive. My main issue is that my website uses a sidebar navigation menu...so I'm stuck on how to incorporate that in the responsiveness. I'm thinking about using Bootstrap to make the process easier but I'm still unsure on how I could rearrange the sidebar so that it fits smaller screen sizes without making any major changes to it.
Any tips, help, suggestions will be greatly appreciated. Thanks!!
You should check out css media queries. They allow you to change the your sidebars with the size of the browser or to disable them you browser is too small.
You could use media queries or you can also use display flex for responsive behaviour: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In css, you can use percentages when defining dimensions like so:
.sidebar{
width: 50%;
}
As long as you sidebar isn’t in any other element, it will automatically resize to 50% of the users screen. If your sidebar is contained in another element, you will have to resize the other element first.
I have been asked to work on the following website by my boss: 2tec.club
The site has been built using Wordpress which I am not an expert in, I have access to only the admin dashboard.
The slider at the top has a strange bug, as you can see, every time the slide changes onto the next slide ,that particular slide for a brief second changes its height. This causes the content to be pushed down briefly which is extremely annoying for the visitors.
NOTE: this only happens on larger devices. It seems fine on my phone.
I have tried using the Chrome developer tools to change the CSS rules with no luck. I cannot for the life of me figure this one out. Can someone please be kind enough to offer their help. If so it would be much appreciated.
If you remove the slide class from your #myCarousel the problem goes away.
There's a number of other issues however. It seems as though you are including bootstrap twice, once for version 3.3.2 and once for version 3.3.6.
You also mention that you're using bootstrap carousel, but you have a carousel.js that appears to be owl-carousel.
So if you're using bootstrap carousel, and you also have owl-carousel - there is the potential for unknown conflicts.
You should review all the files you're including when you get the chance.
your theme is uploading the style.css before bootstrap.css... so its not able to overwrite the changes to bootstrap..
if you r not familiar with coding the easiest solution would be to use bigger images. at this moment your image size is 960 X 295... change it to 1200 X 368.. point is increase the width of the image...
let me know if it works
i am working on my website: http://www.antologiaoliveoil.com/ES/index.html
All looking good, however, when I preview this on Iphone, the image called Lataorganica.jpg does not display well on the first time it shows up on vertically, and the slider does not work. Once I rotate the iPhone horizontally, and then back vertically it works fine.
any idea anyone?
Many thanks
Part of the problem you have is that your text is in your image. On an iPhone or other mobile device where the width is very small, all the text is squish into the image because the image is squish into the mobile width.
One way to fix that is to create separate mobile slider image where there is less text and it is easier to read on a mobile. You can use CSS Media Queries to trigger the mobile slider to show if the width is small.
As for your question about the slider, are you using Owl Carousel (http://www.owlcarousel.owlgraphic.com/)? If you are, include the code you are using so we know how to troubleshoot.
Thanks!
He is using owl carousel. I see you are also using bootstrap. Is there a reason you are not using the bootstrap carousel? See here for reference
You have the required files to use the linked solution.
Here's the website: http://www.square1cards.com/
I'm trying to retrofit a responsive design with a sticky footer and so a lot of the CSS options we're incompatible and the fixed option really didn't satisfy either.
Since my top content (for the homepage) is a fixed height, through javascript I tried simply changing the top margin to the difference between the window height and that fixed value (when window height is greater than the fixed value). A crude hack.
If you slowly resize the browser height it works fine but when you QUICKLY resize the height it causes the footer to jump off the screen slightly. If I can resolve that, I should be ok. Any ideas?
I found Matthew James Taylor's tutorial to be very useful. It worked for me using only HTML and CSS. I would highly recommend that approach instead of using JavaScript.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I'm not sure what exactly you're trying to achieve, but I'm covering all known sticky footer techniques, or the techniques for what people (sometimes erroneously) call sticky footer, in this tutorial. Let us know if it helps you.
I'd like to know what is a good pre-coded jquery slider, but specifically for a 960px site. Also its purpose would be just to auto slide, not worried about buttons so much
I plan to use it with the 960 grid system and have it span across 12 columns
Cheers ^_^
I would recommend http://nivo.dev7studios.com/ as a good slider. It can accomodate images of any size, so it will work regardless of being a 960px site.