I am supporting a website:
https://www.allcounted.com/
If you first look at the home page or What's Hot page and then click the Subject or Country page in the top navigation, you would see the page move left a little.
I know this is a CSS issue, but I am unable to find out the CSS rules that creates this issue. This website uses bootstrap-3.2.0 and some other tools.
At my screen this page seems displaying correctly (Chrome 57). This 'movement' what are you talking about's occurring because of browser is scrollbar, I guess, if I m wrong, punish me, but also I may recommend you using Developer Tools at your browser to inspect that. :)
If you could share more info I will be glad. (Some screens etc.)
Related
I am new to CSS and just learned how to inspect an element. My question is how can i get a whole/full CSS code for an element?
Let say i need a full css code for a form (https://townends.co.uk) please see search form on homepage, How can i get that whole code for this module?
Thanks in advance.
A
Right click -> View Page Source from site.
Then find "< link rel='stylesheet'" keyword. You have all the css files associated.
Sounds like you could use the dev tools in your browser. They can be super helpful for seeing what actually is affecting different elements in your site. depending on which browser you are using the shortcut for it is different. My favorite suite of in-browser dev tools is in Firefox(check out the developers edition of Firefox as well).
From within the dev tools of Firefox you can click on the arrow pointing into a box from the highest level tabs. This allows you to hover over any element on your page and display the classes and ids affecting the element as well as the rules being used on the element in the dev tool partition of your screen at the bottom. There are many more useful tools in browsers so explore it a little and it will probably improve your productivity.
My ASP.NET project seems to run the best in Firefox.
Mainly while someone is navigating around the site, Firefox has no blank pages of white screen while the page is changing, and it looks like it's not reloading the top nav bar of the page or the footer/wrap around the partials that go in the middle.
Chrome and Internet Explorer (obviously) not so much. They seem to reload the entire page every time there is navigation performed.
Is there something I can change about my project configuration that would cause this kind of behaviour? I suppose it isn't too important but it would be nice if it looked as good on Chrome as it does on Firefox.
If anyone wanted to see code from a specific place/config in my ASP.NET project I can post it.
I'm having an issue with my website http://www.ben-drury.co.uk/ (I know the content sounds dumb, but it's my first attempt at a portfolio and it's not finished) where the formatting of the text is very peculiar under a specific set of circumstances.
When loading any post or page in Google Chrome, if I remain in the tab for the duration of the loading it looks like the image below, which is perfect and exactly what I want.
However if I start loading the webpage in a new tab and don't instantly navigate to that new tab, or indeed if I refresh the page and navigate away from the tab, when I come back it looks like the image below.
Interestingly it seems to work absolutely fine in Internet Explorer and Firefox, so initially I thought that it might be an issue with my installation of Google Chrome. However testing it on other computers resulted in the same thing happening, and a variety of different ways of phrasing the issue has turned up very little.
So essentially, how do I fix it for Google Chrome users?
(For those that cannot see the images, the text in the post placed as an example runs outside of the box it should be displayed in and often lines appear over the top of each other around hyper links.)
Update:
I've managed to fix the issue for pages by removing the justified alignment of the text. However I have made said change to the posts as well yet the problem persists for them.
So after a little more delving into the issue, I came to the conclusion that not only was the idea of web safe fonts actually a load of miss-represented nonsense, but that Google fonts might be the way to go. After installing a plugin for Google fonts onto WordPress and making all my posts use one by default, my problem has been entirely resolved and I can even have justified text on my posts and pages.
I am at a loss with why one page on a site that just went live is misbehaving on iPhone (and possibly others at 320 to 480 px wide.
I have used various simulators that have never let me down before (screenfly & iphone5 simulator) plus I have tested the responsiveness using browser resize and for some reason none of these methods can replicate the issue so I cannot find a way to correct the problem. I have cleared my cache and tried from a different phone.
The Problem:
Visit (site removed) from a phone and notice that this is the only page on the website that does not fill the devices screen. Visit any other page and you will see that the rest all fill the page normally.
If someone can point me in a direction to reproduce the problem (not on a phone) where I can access developer tools I should be able to correct the problem on my own.
I have tried reviewing my code to see what is different about that page in comparison to every other page and cannot find what appears to be causing the problem.
Some help would be gratefully appreciated.
Thank you in advance.
In Google Chrome on Phone it's ok!
Check your settings about responsive and specific browsers settings in CSS..
Good Luck, please give photo from Phone.
Okay, I found the issue. Was able to find a div element with in the contact form that had a fixed width and although the content within the form was properly set the div was pushing the entire page over.
I've just created a tshirt shop to put on my own website. A company called spreadshirt.co.uk (hereafter "SS") runs the shop. They allow me to embed their shop on my site via an iframe, and since they allow the CSS to be fully customisable through their admin panel I've got it looking pretty neatly integrated with my site.
The only catch is the iframe - I've set it to 2000 pixels high at the moment (just right for the longest pages). I'd rather have it resize for each page, but expect that to be "hard" so didn't bother.
Anyway, I've just put the page live, and put a test order through it. All is good, until....
...the "Verified by VISA" page. This motherhubbard turns up right at the end of the order process, and the HTML contained in it puts the little dialogue centred vertically in my iframe. I.e. nearly 1000 pixels down from the top - making less savy users think the page hasn't loaded (all they can see without scrolling down is a white background). I can't customise the CSS on this page like I can the SS pages, as this page isn't served up by SS.
Any clever ideas???
Many thanks people!
I'll put a link to my site if people want to see it, but assumed that might be seen as spammy and frowned upon.
I don't deal with iframes too much as i hate them, but i think you can still write to that document using javascript. Reason i say maybe is because its cross domain, but it should still work.
Check this post out
Resizing an iframe based on content
You could also check out
Resizing iframe to fit its content
and a jquery script:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
Again, I really don't know if this will work on a cross-domain website.