I have an owl carousel with cards in my project. It's my first time using it. I've set up to be one card in viewport while screen is small but the arrows are still too big and not fitting the screen nicely. Is there any possibility to change that? sorry for asking but as I wrote earlier I'm just learning all the web dev stuff.
check if this thing is in your css.. reducing the font size would change the size of the arrows
.owl-nav i {
font-size: 52px;
}
Related
I am using bootstrap 3 for a webapp that I am building, normally when building a website I would either want my page centered (default .container) or have it on a total page width (.container-fluid). In other words the grid system would be a vital part of building the page. With this app I am more interested in using it for everything else but if I can make it work the way I need it, it would be a huge plus.
The app that I am building now does not need the bootstrap grid perse as it has a specific use case at a minimal screen resolution, the app does not have to be scaled for tablet or even a phone.
Just to give you a mental picture, I've build a custom navigation (75px width) that is stuck to the left side of the page. What I would like to have is to have the .container grid system NOT centered but aligned to the menu on the left.
I want something like this
I know that .container-fluid technically takes care of the MOST part of so that is NOT what I am asking.
The design that I currently want to build is based on the .container centered grid and not the fluid one.
Does anyone have some tips on how to modify bootstrap to make it work the way I described?
I am using container-fluid for all my containers. This allows the layout to expand on a large display (good) but causes probs when a user shrinks the layout by grabbing the corner of the browser and dragging (bad).
Is it possible to constrain the ability to shrink the layout. Perhaps using media queries? Something else in the Bootstrap bag of tricks?
This works for me, hope it will resolve your issue.
#media(max-width:767px){
.container-fluid{
padding:0px 10px;
}
}
Apply whicheven properties you want for screen size less that 767, you can change the screen size too.
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I'm using Font-awesome in my project, and every icon is aligned in the middle of the line. On Chrome, Firefox and IE, They are aligned corretly, but on Safari, the icon drop around 3 or 4 pixels.
I inspect the icon and in every browser, they are render and ocupate the exactly space they should be. But in Safari, they are rendered with extra top size, a transparent padding on top of the icon. It's not vertical-alignment or line-height problem, the character itself have this "transparent padding" on top.
That seens silly, but on a huge project, every icon is aligned 3/4px down than it should be give me a lot of headache.
One possible reason is that you have a different default line height in the different browsers. Try explicitly setting this to see if if it makes a difference:
CSS
i{
line-height:20px;
}
or even
i{
display:inline-block;
}
depending on the specifics of your styling, you might need to also set a class on the i tag, e.g.
i.icon-class{ ....}
Good luck!
The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)