Hello and thanks in advance for reading, actually am having a strong issue with a long and thin carousel that is making me nuts :/. The thing is at this site http://gabouh.com/sitio/ the carousel with grey/white color when is resize the window apparently my css it reduces de carousel and looks fine, but if i go directly from an iphone or using mobiletest.me i can see how the site on the mobile is like in a page all thin and the carousel is going out of site, you can see it more specific in http://mobiletest.me/#d=iPhone_5_portrait&u=http://gabouh.com/sitio/
I only need to fix the issue with the responsive of the carousel, i don't know if i should post all my css but if any one could give me an idea of how to make it responsive. Am using bootstrap and am really stuck on how to fix it so any help would be really appreciated.
P.S.: Am already using css mediaquery but still in the resolution of max-width :767px it and adjusting my width of the ul of the carousel to width:100% and doesn't seem to work. If my approach is not good or you know a better one i don't mind checking other ways :D
Thanks again.
i see the code and simply wrap it inside a container and it will work perfect with you.
code:
<div class="container">
...... your carousel code .....
</div>
try this and i hope it will solve your problem.
Related
I am trying to open tailwind slide-over inside of a container instead of the browser window but I can't figure out the correct positioning
here is the example https://play.tailwindcss.com/MdY5WoOq5w
Please help me understand how to position the slide-over correctly.
I am using daisy.ui for drawer. It’s easy to use https://daisyui.com/components/drawer/ I hope this can solve your problem.
Check this Tailwind Play link.
Heads up I have used some eye hurting colors. These colors helps in working on the layout.
https://play.tailwindcss.com/k02XZ01a7E
A little inspiration was taken from https://layoutsfortailwind.lalokalabs.dev/ui/layout-drawer/
Points to improve on.
The h-screen of the drawer overflows the screen height.
I suck at mobile frontend / responsiveness. Could someone tell me why the overall container of my webapp is not fixed but slides around when you move it?
I hope you get my question but you can basically move the whole page front left to right.
here ist the page: www.frankfurtstartupjobs.com
I am sure it is something simple, as of again I suck at mobile / css.
Thanks a lot in advance!
If you are talking about page is moving around when we drag it then here is solution
look for class container_header in your html page and add container class to it
this will fix your issue
the answer might have already be somewhere, but chances are, that I might have overlooked it since I'm a 100% new to this (coding) and understand basically half of what I read :)
I'm currently making a website in Bootstrap, and I would like to exclude some elements in responsive mode/design.
Can anyone please tell me how to do that? Is there a specific line of (html?) code that I have to put before the elements that I wish to hide on say view on a phone?
Google hasn't been very useful.
Help is very much appreciated!
Take a look at the utility classes of Bootstrap 3 in the documentation here: http://getbootstrap.com/css/#responsive-utilities
Bootstrap includes utility classes to toggle content across viewport breakpoints. E.g. .hidden-lg, which when applied to a HTML element <div class="hidden-lg"></div>, hides the element on viewports bigger than 1200px (by default).
Thnx guys, I have found it :) Totally screwed up responsive by giving my container a fixed width, but I think I can figure that out!
Thnx a lot!
I am trying to make a website with Bootstrap with a vertical sticky navigation. Now, when my website is viewed on mobile devices, I wanna add a toggle push effect to it like shown in this pen: http://codepen.io/mathelme/full/dHIah
I just wanna know if it's possible to achieve with Bootstrap 3, if not I'll just make my own script. I am really new at Bootstrap and also kinda new to JS.
Any help is very much appreciated! :)
Well, you have absolutely nothing of your own and this is not a coding service either, so I'll give you the tools to do it: you can use (for example) Google Nexus Website Menu from Codrops tutorial and easily adapt it to Bootstrap or Foundation, I have done it for both, so I can promise you it's incredibly easy. As a tip, you'll see that <div class="container"> which is like any <div class="container"> in Bootstrap, and from there just change the content and menu width to col-md-3 and col-md-9 or whatever you need.
You could also use this tutorial from the same site, which is equally easy, you just need to pay attention where you place the menu part, and eventually change the targeted div in your Jquery, but it's really easy, basically replacing those non-Bootstrap divs for Bootstrap divs and that's it.
Of course, these are just some suggestions, you could also use your own example as well, and there are thousands of way to do this, but if you don't know much about JQuery, guess these 2 tutorials will really help you since they work equally well for the experienced coder as for the novice
I'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.