I'm trying to change the height of the Twitter feed module you can see here. The layout was done by the vendor we're using for our WCMS, so the CSS is proving a little difficult to navigate. I resized the iFrame for the feed so that it spans two rows, but now when it resizes for phones and tablets it overlaps the "Spotlight" article below it. Here's the CSS. Any help is much appreciated!
Instead of clearing your floats with an extra div using clear:both it's best to get in the practice of clearing your floats in the parent container using overflow:hidden
The interim fix for the problem your having with your twitter iFrame overlapping your "spotlight" article is due to line 3568 in app.css where the max-height is specified. Removing that should fix the issue.
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
Or maybe doing a media query to specify max-height:auto for that element when in tablet or mobile form.
#media only screen and (min-width: 64.063em) {
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
}
The reason you are facing this issue is because the article tag which wraps the iframe has a CSS property max-height:320px attached to it. Due to this, when you view in the mobile view, the article tag does not expand beyond 320px. As the width is also being decreased in the mobile view, the 320px height limitation causes the content to overlap rather than flow below it.
What you can do is override the 320px max height limit with something like this in your media query :
.home-content-modules-row .content-module {
max-height: 1000px;
}
Hope this helps!!!
Related
I have two category blog layout pages on my guitar website. The intro article images are set to "float: left" which makes the design work on devices with either really small screens or if they have larger screens/flipped screens to horizontal mode.
In vertical mode, on large phone screens, the text wraps around the image in an odd way. Here I would prefer if the text simply just skipped to below the image. You can see what I mean here.
The first example is the effect that I'm after, but on iPhone 6 and nexus phones the wrap effect is unwanted.
Is there any way to make this happen using CSS?
I have tried usin the min-width CSS property but it does not have any effect.
Using Joomla vs 3.6.5, protostar template.
I found two solutions:
.pull-left.item-image {
float: none; /* option one */
width: 100%; /* option two */
}
Only float or only width (or both) will solve your problem. But, please note this will affect the image, not only in the mobile view. So you need to play around with the window's width and see what's the maximum height for the change. then, use #media on CSS (lets say you want it to apply for every screen that is thinner than 450px:
#media screen and (max-width: 450px) {
.pull-left.item-image { ... }
}
I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.
Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!
Try replacing their media query, something like this:
#media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}
In the end, I found this to be the correct code:
#media only screen and (max-width: 1500px) {
.csslider1,
.csslider1 > ul {
height: auto;
}
}
I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.
I'm working on a template page for a website.
It can be seen here : http://www.acielouvert.net/clos/
In the header, I have a slideshow with images width of 100%, they resize with the browser.
When I resize the browser below 960px I want div .continue to stay in touch with div.header.
Actually I put a margin-top: 700px on div .continue.
Have you any idea how can I do this ?
I don't want to use media queries.
Please see here the code for the page : http://pastebin.com/gLaerw1F
Thanks,
Guillaume
Something like this.
#media screen and (max-width: 960px) {
// What ever you want ...
}
I did some several test and the only way I found is using % for the margin-top of .continue
When user resize the browser below 960px, the two divs are stuck together and I avoid the gap due to margin-top: 700px;
I will surely add some media queries in the end but the % is helping a lot.
Thanks for your help #Junaid, #Josh Burgess, #jurgemaister.
After migrating a website to responsive html5 using media queries, I find that I still can't get the mobile iOS 7 safari browser to display the footer/main/header sections at the same width, despite their css being set to display:block and width:100%.
Examples:
http://i.imgur.com/QUxffNT.jpg
http://dev.shermanbrothers.com (username: devreview password: De3e3vfr4 ) [html5 update to site]
And a similar problem occurs even on an older version of the site:
http://i.imgur.com/1sS4WRZ.jpg
http://shermanbrothers.com [OLD version of the site with table-based layout, still has similar issues]
Now, I have some guesses as to -why- this is happening on mobile and not on the narrow windows of a desktop browser:
Some block level elements like the main/between-header-and-footer one have too much content to even shrink down to that 100%
Or perhaps using display:table on the middle section is allowing it to blow up larger than the other block & 100% width elements.
But I don't know what techniques to use to combat the problem.
- I can't even inspect the code via mobile to determine the reasons for the differences.
- setting a css max-width to images (eg max-width:100% ) within their container is not better.
So how can mobile-specific bugs, and mobile width/layout issues especially, be debugged & dealt with?
The tables are a huge headache for diagnosing this problem since there is so much markup to look through. However, the tables are not the reason why your layout is breaking (at least not with the markup I saw when I came across this question). Your problem is that you have so many fixed widths on images, text and table columns.
To fix this, you will have to set-up breakpoints in your media queries. Something like this for the images:
#media (min-width: Whatever is the smallest screen size the image will not break your layout) and (max-width: 1 pixel below the previous size where the image was so wide it broke your layout) {
.header-image {
width: whatever is the widest width that keeps it from breaking your layout; // This will change with smaller queries
height: auto;
}
}
And something like this for your fonts:
#media (min-width: Whatever is the smallest size the font will not break your layout) and (max-width: 1 pixel below the previous size where the font was so wide it broke your layout) {
.navbar-font {
font-size: whatever is the biggest font size that keeps the font from breaking your layout;
}
}
Alternatively for your fonts, you could tell them to wrap as the screen gets smaller, but then you would have to factor in their height as they wrapped:
.navbar-font {
white-space: pre-wrap;
}
Do something similar with the above to allow the width of your table columns to resize properly as well.
Also, follow #TylerEich 's suggestion and configure your viewports.
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
http://developer.android.com/guide/webapps/best-practices.html
Finally, check out BrowserStack for mobile browser testing.
This may not fix all of your layout issues, but it fixed the biggest ones I found. Table-based layouts are a pain to work with. Good luck :)
font-size
the top element of the footer columns (footer-flex) has a font-size: 10px. And the child element (.footer-block) has a font-size: 2em. This means the .footer-block elements have font-size: 20px. (10px(top element font-size) * 2em) = 20px. This causes big texts in your footer.
display
You're using float to align elements side by side which is a very bad practice. If you'd like to align elements properly you should select display: table-cell or display: inline-block. The difference is table-cell is just like <td> tag. Which means all the consecutive elements has the same height.
Because table-cell acts just like td tag the table-cell cannot have margins. If you'd like to have margins for your table-cell you need to provide a top element which is display: table with a style border-spacing. An example which is very proper for your case: http://jsfiddle.net/R3zDu/
As you can see there is no clear: both or float: blah definitions and clear css definition.
This doesn't mean "don't use float anymore". float's main purpose is to align the images in the texts/paragraphs.
clear all the float and clear: both styles.
apply table-cell method.
testing
I don't think there is a software that renders the page just like a mobile phone. On the other hand, if you have problems in iOS you can take a look at Safari browser in your PC or Mac which acts like iOS Safari in most cases (at least in your case).
Sounds like you need a mobile-friendly <meta> tag. Example:
<meta name="viewport" content="width=device-width, user-scalable=no">
Quote from the Mozilla Developer Network:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, user-scalable=no">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
There is a lot of code that needs to be redone.
Instead of being this painful, I highly recommend you to look into a framework like bootstrap or foundation. They both provide good template example to help you get started. Their media queries also work like a charm and they will help you cut lots of development time and some headache.
#head{
float:left;
width:100%;
}
#content_head{
display:table;
margin:0 auto;
}
#body{
float:left;
width:100%;
}
#content_body{
display:table;
margin:0 auto;
}
#footer{
float:left;
width:100%;
}
#content_footer{
display:table;
margin:0 auto;
}
If I was you, and don't want to do a complete overhaul, I would suggest you set:
<meta name="viewport" content="width=500px" />
And try fixing the things that float out of your 500px width (like the navigation).
This way, you don't have to do much work. The site is more or less a bit normal visible on a mobile. I studied your code a little, but it's a lot of working if you want to do it proper.
500px is somewhat ok for a mobile device, but you can tweak it to what you like, it isn't as nice as device-width but gives you a fair compromis between your pile of work to do and the general user experience. As long as you allow zooming (user scaling).
One other trick I suggest is to make the font a tiny bit bigger on mobile on some parts, like your brand nav. And form elements always minimal 16px so you don't get zooming on an iPhone when you focus a field.
#media all and (max-width: 767px) {
.brand-name-td{
font-size:1em;
}
input[type="text"],select,textarea{
font-size:16px;
}
}
Further, what's handy and improves the UX, there are some parts you just want to hide on a phone, use this:
#media all and (max-width: 767px) {
.hide-mobile{
display:none;
}
}
And just when you have some element you want to hide, add the class (divide by a space if you have more classes)
<td class="right-side-nav-container hide-mobile">...</td>
Regards
use diplay block and width to 100%, remove also float and max-width, min-width property.
Also you can simulate a mobile just by using a browser since you already have the viewport metadata. Just resize the width of the browser.
I picked up this handy little fix while browsing some random sites in firebug, it looks like what you're describing, why not give it a go and see if it works :P
$(function(){
// IPad/IPhone
var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
ua = navigator.userAgent,
gestureStart = function () {
viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
},
scaleFix = function () {
if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
document.addEventListener("gesturestart", gestureStart, false);
}
};
scaleFix();
});
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)