I recently whipped this site up for one of my first clients. At present i cant seem to find the reason that the text under each heading is slightly to the left when browsing from a mobile device. (using galaxy nexus)
http://www.digitalgenesis.com.au/2012-websites/qsoils/example3.html
Everything else on the page displays perfectly and ive been trying to identify the problem with no success
I would like the text under the maroon headings to display in its full width which is 60% of the total wrapping container, the text should also be centered reletive to the maroon line like it does on a normal screen size as each .info tag has been given a margin:0 auto; property
Any help would be appreciated even though its not a fatal error for the design, Cheers
I'm quite certain that this behavior is by design. Though chrome on my nexus does a much better job than the stock browser.
A possible solution would be to provide different CSS rules for different screen sizes, like
#media screen and ( max-width: 480px) {
#truck img {
width: 460px;
}
.info {
width: auto;
}
/* etc... */
}
and with that limit the widths of elements that would otherwise force the page to render wider than the usual mobile phone screen width (in portrait orientation)
Another option would be to use a CSS framework with linearization support like YAML and rebuild the design. Or probably a combination of both since the image would need special care anyway.
Also keep in mind that due to the small form factor of mobile devices, large margins should be avoided.
Try giving the Paragraph {text-align: justify;} and see if it helps reduce the right spacing issue in mobile browser.
Related
I am looking for help in regards to a new website that I have built. I have been building Joomla sites for the last 6 months but this is my first site that I am trying to make responsive based on the media queries that I have added.
The site that I have built can be found at the following:
[http://s116169771.websitehome.co.uk/blingphones_j3/]
I have built media queries for the following sizes:
768px,
600px,
568px,
480px,
400px,
320px
What I have noticed is that I still have issues with some sizes, for example when I view the site on my Samsung S6 the max size for this screen is 640px, so this was causing me issues with a 'box' image that had used which was a png.
I have since changed this into an svg file so that it resizes in accordance to the screen size that I am on. The following is my CSS:
#media (max-width: 767px) and (min-width: 601px) {
#mainbox {
float: left;
position: relative;
background: url(../images/box.svg) no-repeat;
background-size:contain;
margin-bottom: 40px;
}
I have also made sure that the text within the boxes has a width of 100% so this resizes with the box.
The problem I now have is rather than adding more breakpoints, I need to ensure the heading on the page 'WE FIX BROKEN, DAMAGED MOBILE PHONES' resizes like how the box and the text within the box does.
Unfortunately when I am resizing the screen from 767px to 601px I notice a gap appearing under the mobile phone image and I am not sure how to fix this to be honest.
I have looked through the Firefox Developer Tools but just cant figure this out. I also have the font sizes as em and thought this would work in the same way as the svg but this isn't the case.
My current site has been built using the latest version of Joomla 3.8.4.
Would really appreciate some advice on where I am going wrong and what I need to consider to ensure when resizing the page is displayed correctly without adding any more breakpoints.
Sheraz, just to confirm the template already has the bootstrap framework as part of its build. The following is the code in my index.php file.
JHtml::_('bootstrap.framework');
I have read you question and i think the easy and best way of making a website responsive is through bootstrap. In bootstrap there are pre-defined classes you can use to make that thing responsive
For example: To make a image responsive use img-responsive class so it will resize itself according to the screen.
<img src="source" class="img-responsive" width=100% height=500px/>
Except this bootstrap contains grid system you can align them easily.
I hope this will help you
One thing that I notice with your media query styling of text inside the .boxestext1 div is that at narrow viewports, the text is too wide for the actual space, and it overflows the box.
One suggestion is that if you replace your current CSS
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0 32px 0 32px;
width: 373px;
...
}
}
with something like the following, it will scale better at smaller viewports.
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0;
width: 100%;
...
}
}
If you want good results on mobile you can never be too careful about hardcoding widths and other units.
Good luck!
I'm trying to make a website for my friend's company and I did but it only looks good on desktop computers. On the phones and tablets looks really bad. I was doing so much research but couldn't find how to use fluid layouts or any other way. On some phones, divs just position in weird places and on some other phones they just look very small or cover the whole screen. And I have a white space on the bottom of the page(on phones). Here is a link so you can take a look: http://agrofit.hr/ p.s. it is on Croatian but you don't need to read :-))). Please help as soon as you can. Thanks!!!!
Try using percentage measurements instead of pixel measurement's.
For example:
.example {width: 100%}
rather than:
.example {width: 700px}
Also as mentioned above use some CSS Media Queries.
So for example:
#media screen and (max-width: 700px) {
img {width: 200px}
}
This says that whenever someone is viewing on a device with a screen smaller than 700px, the image will be 200px.
Hope this helps.
[Edit] To Test Your Site On Mobile -
1) Open the webpage you want to test in Chrome.
2) Right click and click 'Inspect'
3) Then a grey window should appear either at the bottom of your browser or the right hand side of your browser.
4) At the top left corner of the new grey window there will be a two buttons, click the one that says "toggle device toolbar"
You can now select different devices and see how they appear in each.
You should read on css media queries and responsive layouts. You could also check out responsive frame works like bootstrap
div {
font-size: calc((.05em + 2vmin) + (.05em + 2vmax));
line-height: 115%;
}
That seems to work.
I tested on Chrome with Inspect's device profiles.
I'm creating a print template for my website everything it's OK but I have a problem, my screen resolution is 1600x900 so I design the page for that resolution, I'm talking about the height, because my page is created with Bootstrap so it's responsive, sound a little weird but let me explain it, the page in my screen looks like this:
All this if for "print preview (ctrl + p)"
Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text
Some text
Footer
Some text
Some text
Some text
Some text
But when I tried with others resolutions looks like this:
Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text
Page 2
Some text
Footer
Some text
Some text
Some text
Some text
My question here is if exists a way to fit the page to the same height for any resolution, in other words show the page exactly of how it looks in my screen.
This is what I tried:
p {
font-size: 12px;
line-height: 1;
}
#page {
size: A4 landscape;
margin-left: 18mm;
margin-top: 0.2mm;
}
With that sometimes works, I don't expect that you code for me, but I expect some tips to solve this, thanks in advance and my apologize if this can't be understood
You’re approaching this problem wrong. There are an infinite variety of screen sizes out in the world. It's a mistake to design with a single resolution in mind. At best you can target a range of devices with similar dimensions, but then you're excluding a huge number of different devices.
Web pages do not need to look the same on every device. As soon as you internalize this, you’ll begin to become a better web designer.
All that said, you can use viewport units to ensure that that an element remains sized proportionally to to any screen size, but it's not going to be a one-size-fit-all solution, and I don't believe this works when you print.
For example:
.container{
height: 100vh
width: 100vw;
}
You can also use media queries to tell how the browser should print your web page, which are a good way to ensure a page prints the way you want it to. For example, instead of #media screen and (min-width: 30em){…} you can write #media print and (min-width: 30em){}.
Keep in mind your print stylesheets may already be using styles from other mobile or tablet media queries, so it can sometimes be a bit tricky, and you may need to override them. A printed document typically has a pretty narrow “viewport”.
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
I'm designing a set of HTML pages to be printed, and I want elements of the pages to end up the same scale as each other. For example, there's a class of div whose width is defined as 200px wide appears on each of several pages. I want it to appear precisely the same size when each page is printed (suitable for, e.g., cutting out and superimposing).
I'm using a few things that work best in Chrome (mainly the CSS zoom rule to have smaller copies of elements elsewhere), so ideally I'd like to keep using Chrome. (This would be easier in Firefox, because it has an explicit scale ratio in the print dialog.) But it seems that on Chrome, keeping the same element a consistent size when printed from different pages is far from easy.
Chrome's PDF generation (which is what printing from Chrome does under the hood) appears to pick some section to define the page's width, and scale the rest of the page based on that. Or perhaps it tries to set the page size to fit an "optimal" number of elements on one page. If the outside framing elements of each page aren't the same size in all cases, then it seems like elements with screen size 200px can come out anything from 3-4 cm down to 1.5-2cm or maybe smaller.
Just using #page size doesn't help: I've got this CSS and it's not making any difference:
#media print {
# page size: 297mm 210mm
}
Does anyone have any thoughts for how to get things to print out with consistent sizes?
One extreme workaround I could apply is to make them all parts of one big HTML page, and use Javascript to mark certain parts as the only parts to be printed... I'm not even sure if that'd work, and it'd be rather cleaner to keen things on a few different pages. So are there any other ideas?
I found a solution. The key is to ensure that in each document, the "logical page" that Chrome splits elements into for printing is the same size. E.g. if one document has lots of 200x200px squares and Chrome decides to group them in a rectangle 5x4 to print landscape, then you need to make sure that Chrome will print every other consistent document split into elements of size 1000x800px.
For documents that are simply a number of spans or inline-block divs in sequence, it suffices to have a div set to exactly your chosen width (1100px), and ensure that that div occupies the full page width in print preview. Then just make sure your CSS contains something like:
#media print {
#page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
}
If this isn't sufficient, then putting everything inside one or more divs with fixed size (width: 1100px; height: 800px; overflow: hidden;) does the job, as a way to force Chrome to split into the pages you want (and therefore keep elements the same size when printed).
Allow different sizes, but control each size's margins and design!
When first answering I was using Chrome 32.0.1700.107 m
The W3 CSS3 standard established for page sizes works great with the "SAVE AS PDF" option directly from Chrome's plugin on the printing interface.
I have had years of trouble with different interfaces and go-around solutions for different proyects (for example: generating PDF's directly from server which was too heavy in processing and messy in code, or telling users to use windows printing interface, etc). This one is a great solution for me and seems to be definitive!
Here's a perfect example of the same page, with options for A4-size and Letter-size printing margins:
/* style sheet for "A4" printing */
#media print and (width: 21cm) and (height: 29.7cm) {
#page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
#media print and (width: 8.5in) and (height: 11in) {
#page {
margin: 1in;
}
}
You can replicate as many times as you wish using different paper sizes. Extra values (colors, hidden elements, etc.) would go outside #page.
In addition, if the paper size is A4 and protrait you can also use this
#page {
size: A4 landscape;
}
This operates in Chrome
your at-rules media queries are structured incorrectly. try:
#media print {
#page {
size:297mm 210mm;
}
}
that at least provides the correct syntax. as for the size property, it was dropped from css2.1 and browser support varies. you could always set width, margin, and/or padding
If you want to print to a pdf you could just use https://make.cm as they can handle the server load for you and clear up the complexity of getting stuff rendering correctly. I used it for a project and it was so much easier than having to deal with chromes print to PDF system