I'm fairly new to the web developing/ coding area and looking to develop a website I've built. I'm encountering a few problems with my site, but the main issue I'd like to resolve in this thread is the centering of the content on mobile devices. The content looks fine on desktop but seems to shift to the left and not fill the page on mobile.
See link here: https://loudburr.github.io/louisburr/
Any help would be greatly appreciated!
Many thanks!
If you change your banner text CSS to instead of width to max-width that should work
.banner-text {max-width: 600px;}
I think your "html" code (that I saw in view source page of your site) has some fundamental errors. for example you use a "div" tag in the "head" section of your code. and in line about "50" you have some closed tag that I did not understand that where they started. I suggest that you check your codes in this website: https://validator.w3.org
Related
I have a problem with unwanted free space on right side of my webpage.
I am using Bootstrap version 3.3.4. The problem disappeared when I used the following CSS for the body tag:
body{width: auto !important;overflow-x: hidden !important;}
But for mobile devices the problem still exists. I do not know what is causing it and I would like to get response from you.
Here is the complete example website: http://www.filedropper.com/zapytanienastackoverflow_1
Here is a screenshot with the white space. It appears when you scroll the webpage to the right.
I can't post comment because of a reputation (I really understand these limitations, I didn't find single one which would actually help and not the other way around), so I have to post it as an answer.
The link you provided doesn't work so I can't be sure. But to me it looks like it could be a problem of the size of the picture in addition to the bootstrap gutter? What dimensions did you use with the picture?
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.
I downloaded a pre-made layout for a simple website. However, the original scale is quite small which makes it hard to read the text on the site. That is why I want to use the css zoom argument to enlarge the page :
body {margin:0px; padding:0px; background-image:url(images/background.jpg); background-repeat:repeat; zoom:140%}
This seems to work but this also causes the content of the page to no longer be centered.
(example of the problem: http://217.199.187.69/testaccountarne.be/ )
Can anyone help me to fix this?
Thanks,
Arne
P.S. As you probably already noticed, i'm a CSS novice.
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.
Per this blog post here (http://www.david-lewis.com/css/css-that-can-affect-performance-on-ipad-web-apps-or-phonegap/), there is a bug in iOS 5 that I have no idea on how to get around.
Essentially like the title says, if you have a section of your site that is scrolls (I'm using the new -webkit-overflow-scrolling), and if there is an iframe out of the viewport, it will not load it.
The blog post linked above says the following:
iFrames
What is it: Using iFrames in overflow:scroll elements to show things
like videos or maps What’s the symptom: If you have an iframe that is
outside of the viewport in an overflow: scroll element (especially
when using -webkit-overflow-scrolling: touch) then it will not render
as you scroll to itWhat’s the cure: no idea, please send me the
answer
Does anyone know how to fix this? I've been looking all over the web for a cure, but it is no luck. It seems to be that if you click on the iframe, it will show it after the click.
This in my mind is a huge issue for people developing web-apps. Does anyone know of a fix?
Well, I hate leaving this as an official "answer", but as of time of posting, there is no fix...
I'd assume if you'd use JavaScript to extract the HTML from the iframe, put the code in the same spot, and somehow get the CSS to work with it too, it would work. But darn, that would be too much work to do on such a slow device like an iPhone.