Mobile padding issue [closed] - css

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have inserted some spacing between the map and the "Used By Thousands Of Canadians" in the middle of my website, which it looks like I have room for. But when I do this and view the website on my Iphone it shows that it doesn't have any room and the image is push away from the text. Can someone see what is causing this and show me a corrective action. Thanks for your time
www.jobspark.ca

try the % instead of the px unit
or use #media and specify dimensions for the smart phone resolution
#media
CSS #media for standard devices
I hope that will help
PS: under the #media you can specify changes only for certain elements, ID or classes so you don't have to redesign the hole page (as far as I know) so don't be shy to give it a try :)

Related

Irregular bootstrap3 grid, one column out of container [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm seeing some crazy layouts sometimes. One of them is layout where we have boostrap container that has max width, let's say 1120px.
One of columns has 50% width of container, and the second has 50% width, not container but browser.
I've attached 2 screens to clarify my question - and the question is: does anybody has claver solution, that is responsive and will not break things during resisizing ?
So, 2 columns will not collapse ?
I will not provide html / css code, as i have no idea, how to code this right and without javascript.
If any of You have any ideas, i'm saying "thanks for a tip :)"
you can use width: calc() to calculate any width you want.
quick example
https://codepen.io/kupas/pen/Yepadv
PS: for smaller screen use mediaqueries

3D effects in website [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Say I want to make a website, and I want the page to have some sort of a main-area, and it's supposed to be something like an open book,
sort of something like that if I want to make my point, I want the left border to be 100% of the height of whatever the page is going to show, and the right border(the one that's intersecting with the left border of the right page) to be say 90% of the height of it... that's sort of the idea of the design.
I was sure there would be some HTML5 features that would support this since I've seen stuff like this around the internet but I realized it wouldn't be that easy.
I hoped that there would be people with proper knowledge of web design that could help me with this thing
This is very good article for page flip functionality with html5 :
http://www.creativebloq.com/html5/create-page-flip-effect-html5-canvas-8112798

Borders and vertical dividers [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to create some kind of different vertical dividers than usual ones. Instead of using the classic css border properties, how may I implement something like the dividers at the bottom(blue footer) in the following page: https://www.ote.gr/en/web/guest/consumer. I think this must be a picture. If so,any idea where to find some similar pictures?
Thank you very much
The website you gave does indeed use a picture, which is probably the easiest way for this effect.
I would strongly advise you to learn to work with Chrome Inspector or Firebug. This would show you the following:
And this would even learn you the image can be found at https://www.ote.gr/ote-corporate-theme/images/divider.png
I would advise you to create your own image though. Shouldn't be that hard...

Non-responsive site will not resize to fit mobile browsers [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.

Same size text looks bigger in mobile [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Anybody knows why in mobile footer looks huge compare to other text here even though both are 13px?
http://goo.gl/7vIHZL
Pixel measurement is relative to device screen size. Try changing px to em, and if that doesn't work try % for the size of the font. Here's a good converter: http://pxtoem.com

Resources