I have been working on a modified wordpress site (heavily modified theme), and have run into a css / responsive related issue.
When the body has an unusually large-width item, or a dynamic item (dynamic in terms of width, like a jQuery DataTable) whose width goes beyond the body, the sites header and footer do not properly expand to occupy the full width of the body.
for a live example visit this link (however you will need to use a user-agent modifier or use chrome emulator, either of which set to iPad or iPhone, for example).
image example:
http://vicariauction.com/cars-coffee/
(notice how the header and footer dont expand to the width of the "map" image in the body)
-- here is a link to a screen shot of the above page, showing the exact issue:
i.imgur.com/BUjzLAK.jpg
jQuery dataTables example:
http://vicariauction.com/future-auctions/?ahcode=NOLA%202015
(notice how the header and footer dont expand to the width of the jquery datatable below)
-- here is a link to a screen shot of the above page, showing the exact issue:
i.imgur.com/4nx2M5v.jpg
Both examples, header and footer's widths scale properly if using anything but a mobile or tablet device (or user-agent).
I realize the answer may not be a simple explanation, but can anyone maybe at least point me in the general direction that i should be looking towards for a solution?
thanks!
Instead of making the header wider, why not make the image narrower? Mobile users shouldn't have to scroll horizontally anyway.
To make the image fit the width of the screen, use the following CSS style on the image:
max-width: 100%;
height: auto;
I realize this only answers part of your question, but it's definitely what I would do with the image.
On an unrelated note, I noticed that in future-auctions/styleau.css, line 18, you have the following line:
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
Prefixed CSS rules should always come first, so the correct way to write that line is:
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
Related
i implemented a site (through small JS code) in my original website.
Everything works fine but yesterday i found out that when i first load the page, there is no scroll bar. If i refresh the page, its possible. I played a bit with the parameter 'height' but it didnt work.
Body-Code: <heyflow flow-id="erp-berater-anzeige" height="2000" width="100%" pass-parameters scroll-up-on-navigation></heyflow>
The page: https://entiac.com/erp-stellenanzeige/
PS: Im not deep into coding
I'd advise you to, first of all, add a css file or <style> tag in your index file, which will contain
body{
overflow: visible; !important
}
so you will be sure that isn't an issue. The site has some sort of scrollbar issue even on PC browser, so it would be better to set height:100%- hardcoded values like body height 2000px aren't a good solution.
Other good thing which you could do is divide your site in <section> your code </section>, give them height: 100vh; and make sure your js file loads in one of these sections. This way every section will be full height of your display (100vh = 100 view height). Such a split will make your site bit easier to manage.
Cheers!
I'm working on a clients website, implementing owl-carousel, but when going into mobile view in chrome + Firefox, owl-stage width (Which is auto calculated) goes crazy as I resize and go back go normal, widths around 4000px...etc.
P.S. code works fine on normal desktop view, it all goes crazy on 576px and below.
I have googled owl-stage width issue and found many old reports and solutions (including stack-overflow) that did not fix my problem, including setting overflow, removing owl options to debug.
code can be found here:
https://www.fisique.co/v2/
owl-stage width should be normal and not more than screen, which in return will render the h1 above it to be perfectly centered on the screen.
Ok, I spent more than 12 hours to figure out why this weird behavior.
Turns out, if you're using PagePilling.js (or fullPage.js) and trying to mix with Owl.Carousel or any other Carousel plugin, a conflict occurs because of css display property of auto generated divs set to table
The solution for my case was adding table-layout: fixed:
.pp-section.pp-table {
display: table;
table-layout: fixed;
}
If you're interested to read more about it:
https://github.com/alvarotrigo/fullPage.js/issues/895
I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?
I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.
I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.
You can build a responsive websites using CSS's #media rule.
Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
This code will result in your page's background color being blue until the screen width is <= 600px.
Read this MDN article for a more detailed explanation on media queries.
You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.
"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:
const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";
Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.
From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:
<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>
Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.
You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...
I have tried to make my site tokyocomedy.com to be responsive design down to a minimum of 320 pixels wide. Most, if not all, pages, such as this top page look reasonably good down to that size, using Firefox's responsive design view:
However, this one page, the schedule page, is not working:
The width it gets stuck at seems to be around 530 pixels:
The only thing that is different on this page is the calendar, so I could be wrong, but my best guess is that something about the calendar CSS or JavaScript is holding some minimum width or padding space or something. I have gone through all the elements I can find using the Firefox web developer inspector:
Relevant CSS IDs and classes seem to be #calendar, fc-toolbar, fc-header-toolbar, fc-view-container, fc-view, fc-list-month-view, fc-widget-content, and fc-widget-header. However, I can't find any width declarations, padding, margins, or any other sizing declaration that would explain why the page will not shrink horizontally. It's possible that maybe there is JavaScript acting on the styling that is altering it in a way that is less easy to find.
The page uses the fullcalendar v3.9.0 JavaScript library. I've put the CSS in use on PasteBin for reference.
What is preventing this calendar page from shrinking down to 320 pixels like other pages on the site?
There is a small error in your code. You need to use word-break css property here as your email text is big. kindly refer to attached screenshot.
Hope it solves your problem.
please add below two property and check
* {
box-sizing: border-box;
}
#maincontent {
float: left;
width: 100%;
}
You used display:inline-block style.css line no. 60 ,use display:block rather than display: inline-block
#maincontent, #upcomingshows, #recentblog{
display:block;
vertical-align: top;
}
I'm working with Visual Studio, ASP.net, HTML, CSS, C# (for the code behind), ADO.net and Javascript/Jquery.
I'm trying to make a web page with some div block and I want that the block never exceed the browser. Do you know : how to add a height size for div even if I change the resolution of my window?
PS: I'm French so, please, don't be matter about my mistake.
Without further clarification of your senario, one method is to do the following:
HTML
<div id="test">
My div
</div>
CSS
html, body {height:100%;margin:0;padding:0}
#test {width:100%; height: 100%;position:absolute;}
Setting height to 100% usually works. NOTE: Sometimes padding may push you beyond the browser.
I've encountered screen resolution problem before and this solved my problem.
If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)
The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.
In your CSS just add this line on your page ,containers, wrappers etc. margin:0 auto;
and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here. Hope this helps :)