I'm relatively new to coding, but I've made half a dozen full-stack apps and in each I've noticed that whenever I deploy an app to Heroku / GitHub Pages, every single element on the page gets smaller than what they were on my localhost. For example, a Navbar will go from say 50px to 30px. The font size for an element will go from 20px to 12px. I have no idea why, I'm guessing the index file isn't reading the CSS files properly when it's being rendered and defaulting to something, but it's irritating and I can't plan how to style my pages because I don't know what the finished product is going to look like. Does anyone have any sort of answer?
My portfolio site on localhost: everything is the size I want it.
My portfolio site deployed on GitHub pages: everything is smaller.
On localhost you're zoomed in, do you see that icon at the left side of your address bar? Just reset your zoom on localhost with CMD+0, or on PC I guess it's Ctrl+0 and you'll have a consistent look.
Good luck with your site (:
Related
I am working on an e-commerce site and the product images are NOT visible on the live site but they are visible on my local development version even though I am using an exact copy of the code and database. What is even weirder is that when I open the developer console and look at
- the source code for the images is there and also the preview of the image is correct which tells me that the image is loaded correctly it must be something else.
Also, the only difference between the development site and the live site is that the live site runs on SSL, so I guess the problem could be related to that but I have no idea what it could be - the image urls start with https.
Here is an example page where the images are not visible.
Also, to mention the website is build with WordPress and WooComerce, custom theme.
EDIT: For some reason the images are no longer visible on the local version as well.
One of the parent elements / ancestors of the image (in single product view) is a DIV which has the class attribute woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images and a style attribute which contains opacity: 0, i.e. completely transparent, therefore it remains invisible
So you have to find where that opacity setting is added and deactivate it. (Or if it's static, simply remove it from the HTML tag)
I have WordPress page whose theme seems to be loading an undesirable CSS background-image. I want to try to locate the code that is responsible for loading this image but first I have to find its name. I was wondering if there is some tool that allows coders to list and identify the urls of all css-background images that a page calls.
Obviously finding background-images is trivial if all of the page's CSS is controlled only by inline code and directly linked CSS-stylesheets: a text search "find" operation for "background-image" will allow you to find all bg images. But the task becomes complicated if styling is js dependent, and in this case, it was at times.
For those of you who immediately wonder why I need would want to go this route instead of simply using development tools in Chrome or Firefox, below is a list of reasons why.
Why I want a way to automatically extract the background-image urls:
The unwanted ghost images only loads on my mobile phone, so I can't inspect the element to find the image in using my desktop development environment. This is true even if I set the developer tools to "mobile".
I don't have a development environment for my phone that will let me inspect the relevant element.
I tried downloading the exact html loaded by the mobile phone in my browser, but the css ghost image will not appear on my desktop even when use the code my phone had loaded.
The ghost image is not from a virus in my mobile phone browser, because the ghost image loads on my phone even when I used a different browser.
Any help will be greatly appreciated!
Thanks
UPDATE: I figured out the cause of the ghost image using the free trial provided by Browserstack, a mobile emulator. At allows you to view interactive content and inspect it with dev tools. I learned about it from this question: test mobile website in desktop browser.
My problem turned out to be that the css-image in the theme was pointing to my local address, which different from what it should have been on my remote server. The issue turned out not to be a desktop vs. mobile problem, but rather local vs. remote. The emulator reproduced my issue, and it allowed me to inspect and find the problematic code. Still I would love to know if there is a such a css-crawling tool, so I will leave this question open.
For week's now I can't figure out why my site is designed to be responsive, is everything right and laptop works perfectly even when put in a small size and then step into my mobile and is not responsive.
I've tried uninstalling the plugins, I changed the theme and not find out why.
Can you held me?
The website is: moinhodocomandante.com
Thanks for your atention,
Catarina
Unless you are intentionally trying to send your mobile users to dubious porn websites, my guess is that your site has been compromised. Lucky for you it has been poorly compromised and it is only breaking the page instead of displaying the ads/redirects.
To verify this, put your browser in developer mode and switch to mobile emulation and look at the network tab.
Without knowledge of your limitation, I cannot recommend any measures for cleaning up the compromise, but consider disabling every plugin and upgrading WP. It looks like every single call to a CSS file by your plugins gets redirected to something nefarious.
Although I just launched my website, there is only one publicly visible bug (that I know of) that I need to fix and I haven't managed on my own.
I'm running Wordpress 4.4.1 with the Corpo theme and toolkit, the latter which comes with a nice slideshow on the front page and portfolio project pages. Unfortunately, the author of the theme+plugin vanished from the earth: no longer active on the WP forums and her website/domain name is no longer renewed.
Long story short: the slider code is working responsively on the front page, but not on the project pages.
My website is located at http://www.jurjenbarel.com/
The project slider gets really ugly when you get under 540px width, because the container div is set at 540px. I can't set the container at max-width: 540px; because it will make the slideshow ridiculously small.
If someone with better knowledge of CSS has any idea on a fix, I would be very grateful!
Thanks in advance!
I have recently deployed a solution from Development into Staging but the scale of pages on Staging are noticably different to how they were rendered in Dev. It's the same on pages with the default master page like settings.aspx pages see how the grey ribbon doesn't quite line up when they are put side by side.
The s4-workspace div has a style element attribute applied to it on the default pages, but when using the custom master these don't exist. Also changing the attribute values to be the same on the two sites in the browser dev tools doesn't make any difference to the display.
The corev15.css of the two servers are not quite the same which is interesting, but the differences are so small and definately aren't causing the issue.
This phenomenon disappeared without a fix.
It was suggested to me yesterday by a colleague that it might have been a zoom setting in IE. I've just set one browser to 105% and another next to it at 100% and it was an idential the originally identified size differential.
Looks like it was an accidental Ctrl+Mouse_Wheel_Scroll.