I was wondering is there anyway to get a exclusive tablet view in foundation with its grid. I want an specific grid layout for desktop [achieved], one for tablet [not achieved] and one for mobile which is done perfectly. but after it's major breakpoint at 768px there's no difference between mobile view and tablet view regarding the columns lining upon each other. If you get what I'm saying some of columns get too big in tablet view which isn't absolutely necessary. There's no necessity to show them with 12-column mobile grid.
Second issue, I downloaded the RTL version of Zurb Foundation (the problem stays when using the original copy), the "row" element which has a role similar to "container" or "wrapper" or something like that, is started from the right side (left side in original version) and it's not absolutely centered. The problem becomes more critical when we enter mobile view and using block grid. Elements are not centered.
I really appreciate your answers guys :)
To answer your first question you can only get the tablet only grid if you are using SASS or SCSS.
*This experimental feature is currently only available by using SASS and importing the _grid-5.scss file into your Compass project. You can also simply download the grid-5.css file, and link to it in your HTML head after your foundation.css.
Medium Grid
As for the RTL can you post a example showing how it looks in RTL and LTR so I can get a better idea of what you are seeing. Also its easier to have one question per post.
Related
I've built flat page sites for years, largely with table architecture, and I know they must become more mobile compatible.
However, I actually WANT some of my non responsive sites to display in mobile screens as simply reduced-sized versions of themselves.
In an effort to understand the basics, I've created a simple page, no tables, one piece of art, and the meta tag which I understand is supposed to reduce a large size HTML page to fit within a mobile screen. But when I check this in a mobile screen emulator, my page is huge with just part of itself showing in the mobile screen. It's not reducing so that its full contents show within the screen.
What's the basic concept I'm missing?
http://ldihealtheconomist.com/html5-test-single-col.html
You're using a set width.
No matter what screen you're using, if you set the width as pixels then it will be displayed as that many pixels.
No offense, but if you've been making sites for years and don't know this, then maybe it's not the right thing for you...
Read up on #media queries, vw,vh and viewport widths.
Look at frameworks such as Bootstrap or Skeleton.
Is there a way in bootstrap's css to show some level of details for some devices and more for others.
My example would be groupon. If you visit groupon on your iphone you can see single column with offer after offer , yet visit the site on your desktop and you see different looking versions of the same offers, but they are positioned in a 4x1 box rather than a 1x1 scrollable list.
The whole page looks different. This must mean some elements detect they are being rendered on a small device and therefore dont show, am I on the right lines?
I am very new to bootstrap!
You can use the bootstrap hidden-sm field on certain td elements to make them disappear on certain screen sizes.
It would also be worth look at the responsive tables class to make a scrollable div to fit wider tables as well
I'm using Bootstrap 2.3.0 on the following website: www.agrium.com/AgTracker
The problem I am having is that when the browser window is resized or when a user is using a tablet/phone, the two logos at the very top of the page are not displaying as I would like.
Below I am showing this behaviour using Chrome on my desktop.
Situation #1: full screen display, logos are spread out and full size. I'm happy with this.
Situation #2: screen size is decreased, but logos are still full size. I would like for either the logos to stay on the same line and for the logos to scale (shrink).
Situation #3: this would likely be solved by whatever fixes situation #2, but I just wanted to show that if I shrink the browser width further, the Agrium logo has scaled (yay!) but the AgTracker logo has not (boooo).
Any help with updating the CSS or way I am using Bootstrap that allows for the logos to both scale and remain on the same line would be appreciated.
There are a couple of ways to solve this problem:
At first, you should recognize that the first two images are actually not two but just a single image. Using this technique, you can make a single png or jpg file with all these three images in combined into a single image file. I would not recommend this, so I would like to propose a much more robust solution using CSS. Please look at my second point.
You can use CSS3's in built feature known as CSS3 Media Queries.
This technology allows you to create responsive websites and be able
to dictate how your content appears on a variety of devices like
mobile, tabs or desktops.
sorry for asking as I hate asking questions but sometimes its the last resort.
I am pulling my hair out over here and I have read hundreds of pages over the weekend and just can't get my head around how to do achieve this.
I want to have a simple 4 column 'home' landing page for desktop and ipad (sub pages will revert to 2 columns - content and sidebar). When the user goes on to a iPhone I want the user to see 2 columns.
I have managed to either get the iphone to display a scaled down version of the 4 columns using the grid system or I have managed to get it displaying 1 column, neither of which help me.
I have attached an image of what I am trying to achieve if it helps but I would really appreciate if someone who has had some experience in this field to point me in the right direction as I just cant figure it out.
I am developing using wordpress and have tried bootstrap, responsive theme and bones and getting the same results with each. Each using a responsive fluid grid. I may be barking up the wrong tree but if someone could point me in the right direction I would appreciate it.
You need to use CSS media queries, based on screen size / device width.
This will allow your CSS to style the widths of columns on each device...
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
Current versions of Adobe Dreamweaver now also support what are called "Fluid Grid Layouts" which are worth a look for this kind of issue. They are also very helpful for quickly solving inter-device layout issues. You can design easily for Mobile, Tablet, and Desktop in one interface!
I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css issue.