I'm kind of a noob to website development so I'm not sure how to read the massive CSS file. Basically, I want my image slider on the homepage to be centered and not toward the left side of the page. I looked at some code by the inspect tool but I couldn't figure out where to make changes to make the body aligned center only for the homepage.
My website is www.indiacanada.net
Any help would be appreciated!
add class "col-md-offset-2" for the below DIV wich contains the slider.
<div class="col-md-8 la-content-inside col-md-offset-2">
And remove the below empty element.
<div class="col-md-4 left_sidebar"><aside id="la-right" role="complementary"></aside></div>
Related
I am developing an Ionic/Angular application and have to show an image slider. I did this with swiper ([https://swiperjs.com/get-started#install-from-npm]). Now my slides look like this (images have different widths and heights):
actual looking
My question is: Is there a way to center these images horizontally and vertically? This would be so much better looking!
Thank you in advance.
The idea of swiperjs is to turn the entire div into a slider slider. You can do whatever layout you want inside that div. My advice is to design it separately, with some tool and then add it to the div with the swiper-slide class.
On Full Screen & mobile the ranges panel (class="col-md-3") displays correctly but on tablet the left column is covered by the youtube image panel (class="col-12 col-md-9").
I have tried multiple configurations for the div style but don't know enough about Bootstrap css to fix. Any help will be greatly appreciated. www.topjocks.co.za/saddler/
As in full screen the left ranges panel shouldn't be hidden behind youtube image.
Your Range Image is longer than the col-md-3 when it's on tablet mode. That's why it hide the right part of the image.
Solution.
You can adjust the col-md-3 to col-md-5 and change the youtube div to col-md-7.
Using the appropriate bootstrap grid system will help in this case, since the image you are using is longer it will be better to use the right column classes for the different screen sizes
<div class="col-md-5 col-lg-3">
</div>
<div class="class="col-12 col-md-7 col-lg-9"">
</div>
This will help with the tablet issue on your website.
For more information on grid systems
https://getbootstrap.com/docs/4.3/layout/grid/
Hello Stackoverflowers,
First of all thank you for reading this post. I am having a rough time trying to figure out how to make my Cycle 2 slideshow images shrink and move the images next to the other divs while resizing windows. The funny thing is that when the slide show has only one png the image moves next to all other divs while resizing, but when I add another image to the slide show all the images stays in its own position and doesn't move with the shrink.
here is my code for the Sector:
<div id="clientscont">
<div class="Title2">Clients</div>
<div id="container">
<div id="wrapper"> <div class="controller" id="prev2"></div><div class="controller" id="next2"></div></div>
<div id="slider2">
<img src="../image1.png" alt="" width="265" height="116" class="logoclient2"/>
<img src="../image2.png"/>
</div>
</div>
</div>
I tried everything in positioning and display modes and even tried making them separate divs with different attributes....but can't make it work. I really need your help, I thank you all in advance.
*For Cycle I am using jquery
Solved,
changing css attribute to list-Item display solved the issue, it is the only display mode that worked, to solve the bullet problem just changed the font color to the actual background color to hide the bullet. Now both images stayed centered while shrinking page. The truth is that i don't know the reason of this, if somebody could explain it would be perfect!
ShaloM! and Happy Coding!
I am working on developing a WordPress theme, and I am planning to develop it with Bootstrap. For this theme, there will be the option of having a three column (left sidebar, content, right sidebar) layout, (or even just a left sidebar then content would work for this question).
Anyway, I am blind, so am acutely aware of how annoying it would be to have to move through a sidebar on the left of the content with lots of widgets, just to get to the content itself, when a sighted user can just look down on the content. So my question: How can you make the screen reader (maybe the dom?) see the left sidebar as coming after the content, yet still have it be directly to the left of the content with Bootstrap?
I thought of a possible way, namely making two blank divs in columns 1 and 3 with the content between them, then going to a new row and doing columns 1 and 3 with a blank div between them, but this just seems really hackish.
Any thoughts?
The ARIA spec defines an aria-flowto property; however, screen reader support for this property is limited. See the following web pages for more information:
WCAG wiki article Using aria-flowto
Using aria-flowto to give users a choice of reading order
ARIA-Flowto (property)
I just checked the example on the "Using aria-flowto to give users a choice of reading order" page in Safari 9.0.1 / VoiceOver for Mac OS 10.11.1 and Firefox 41.0.2 / Windows Narrator for Windows 10, and found that the aria-flowto had no effect. In Microsoft Edge browser / Windows Narrator, navigating from "The Daily Planet" skips to the election results section, then to the sports news section, but does not return to the weather section. So, it appears that there is partial support for aria-flowto in that combination of browser and screen reader.
The typical way to customize the reading order is to make sure that the source order of content in the document matches the desired reading order. Using Bootstrap, you can place the main content area first in the document, followed by the left sidebar content, and then by the right sidebar content. You can use Bootstrap's column ordering CSS classes to visually swap the left sidebar and main content areas.
For example:
<div class="container">
<div class="row">
<div id="main-content" class="col-md-6 col-md-push-3">
Main content.
</div>
<div id="left-content" class="col-md-3 col-md-pull-6">
Left sidebar content.
</div>
<div id="right-content" class="col-md-3">
Right sidebar content.
</div>
</div>
</div>
Notice that the main content markup appears first in source order and is pushed over 3 columns (visually) via col-md-push-3. The left sidebar markup appears next in source order and is pulled over 6 columns (visually) via col-md-pull-6.
Here is a live JSFiddle: http://fiddle.jshell.net/pkywjac5/show/
<form class="form-horizontal" role="form" id="form" runat="server" method="post">
<div class="form-group col-md-12">
<div class="row col-md-4">LeftSidebar</div>
<div class="row col-md-4">Content</div>
<div class="row col-md-4">RightSidebar</div>
</div>
</form>
I have been successfully using jScrollPane in a number of applications where it has been working perfectly. Running the plugin creates two additional divs around the content with classes of jspContainer and jspPane and a third div for the scrollbar.
However when I try to use it with a flyPanels plugin (https://github.com/SubZane/flyPanels), the only div the 'scroll-pane' class can be added to, to give any result is the div directly above the nav.
When the code is created on the page, I found that while the nav inside this div was surrounded by the appropriate jspContainer and jspPane divs, it was missing the separate div for the scrollbar itself.
I'm wondering whether it might be as a result of being placed around a nav, or a problem with the height and width of the div the class is on. Either way I have searched as many stackoverflow questions and the github forum for issues as much as I can bear, but all questions are either irrelevant or lacking in an answer.
I've included the main part of the code, but the header is missing so I assure you that I have included jQuery 1.9.1 and the correct javascript and css files (as the same ones worked on a separate project).
<div class="flypanels-container preload">
<div class="offcanvas flypanels-left">
<div class="panelcontent scroll-pane" data-panel="treemenu">
<nav class="flypanels-treemenu" role="navigation">
...
<!-- Unordered list containing several sublists -->
...
</nav>
</div>
</div>
<div class="flypanels-main">
<div class="flypanels-content">
<!-- Some additional code -->
</div>
</div>
</div>
Has anyone got any experience of using these two plugins together and if so does anyone have any clue as to how this can be resolved?
I haven't used flypanels but I did integrate jscrollpane many times. If my memory is correct, jscrollpane needs to be visible on screen (not hidden) when it's initialized. If not, it will have a height of 0 thus "not working".
Try this
Don't hide the sublist items
Initialize jscrollpane
Hide sublist items.