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 need to embed a website in another website ( throught an iframe I think ).
I want to embed this website in this resolution: 200x150 pixel.
How can I do that ?
Just in case someone wanders in here. Solution in https://stackoverflow.com/a/11382661/605112. Same problem in different context. Set iframe to desired width and height and use CSS to scale it. May not work in all browsers.
<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
If you mean scale the website down to fit in that frame then you can't.
The website would have to be uncommonly small to fit those dimensions.
<iframe src="http://www.google.com" width=200px; height=150px;></iframe>
If you don't have access to the iframed site itself, then there's very little you can do since you can't access iframe from other domains with Javascript.
However, if you are able to change the external page, you could either pass a URL parameter or try CSS3 media queries. For the URL parameter you would simply include a secondary stylesheet if the parameter was present that changed the layout or reduced the size of the web page in some way.
It's impossible to scale entire web sites programmatically, whether in an iframe or not.
You would have to take a screen shot of the embedded page on server side, resize that and serve it as an image.
Related
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 1 year ago.
Improve this question
I'm setting up a uscreen website, but have problems adjusting the template font colors with css. I'm trying to change the color of the text "Unohditko salasanasi?" on this page: https://rawinto.uscreen.io/sign_in
This is the CSS I have added (copied from dev tools local changes):
.variant-text.color-primary[data-v-17fd35e2] {
color: #1a202c !important;
}
I must be doing it wrong - new to css. Help please?
The CSS code was correct, I got that confirmed. Should someone else stumble on this same problem in the future with Uscreen, I will paste the instructions from uscreen tech support here:
"When customizing your site using CSS, please make sure to create a backup and add your CSS inside the of the theme.liquid file, the Common Pages CSS or the Head Code Snippet using as well. It might be dangerous to edit the theme CSS as that is a minified CSS file and could break other parts of the site."
CSS not getting reflected as browser it getting that file from cache.
You can solve this issue in 2 way.
Disable the Cache using dev tool.
Try Empty cache and Hard Reload.
Disable Cache in your browser and refresh. it should work
try deleting your cache and run page again
or open page in private window
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 6 years ago.
Improve this question
I'm having trouble making my website mobile responsive. I'm new to web design.
I have created a new Rails app that allows the user to create posts.
The post looks fine on my desktop, but when I go into's Google's inspect element tool and try to view with a virtual smartphone (e.g. iPhone 6). The text is very small and the post doesn't look correct
This is how a post looks on my desktop. This is correct.
However, this is what posts look like when I view on inspect element. Posts are suppose to have a width of 100%, as you can see it has, but why is the text and icons so small? It doesn't look like the above picture.
What can I do to make posts viewed on smartphones look exactly the same as posts viewed on a desktop?
Here is an example of what I'm trying to do with my posts. In the image below, the post's text size and content look correct in mobile view.
Two options:
Sometimes Chrome has a lag when you have to refresh your page after you choose the virtual mobile view so the website will adjust the new "mobile" resolution,
Try to use the meta tag for mobile support:
<meta name="viewport" content="width=device-width, initial-scale=1">
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 7 years ago.
Improve this question
Google's made a big deal of "if you hide it, it won't count." However, google cache shows it doesn't understand a lot of things correctly. Maybe google sees something as hidden when it should show or shows when it should be hidden.
So, I ask about CSS 3D transforms.
Take this example for example:
3d Carousel CSS
Ignoring Javascript, if it were instead coded to to run on pure CSS and rotate on it's own (kind of a replacement for a bannder display)... what would be the SEO effect? Would it treat items that start facing away from the user as hidden and what's facing the user as SEO-able content? Would it ignore 3D and treat them as just divs to look at? Or would it ignore 3d as if it were ALL hidden?
Seems important to know for design purposes if one intends to use 3d effects.
To check what Google's robots see, you should not rely on cache, but on the 'Fetch as Google' feature from Google Webmaster Tools. Cache lags behind the index (sometimes a lot).
Your 'if you hide it, it won't count' rule is not correct. It's: 'if it is never displayed to users, it won't count'. In other words, if users need to click on a button or on a tab menu to display content, it will count for relevancy and ranking (i.e. SEO), but Google will discount such content somehow. Ditto for CSS effects hiding or displaying content.
Google can execute Javascript and take CSS effects into account in general, but always check with the 'Fetch as Google' feature to be sure.
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 8 years ago.
Improve this question
My friend hired a guy to build her company's website, but the developer has since stopped responding to her attempts to contact him. The site performance is pretty poor, especially because it's a graphic design company. The images should be the most prominent and accessible elements on the page, but they load horribly slowly.
I looked at the page source but I'm a total novice with webdev and this site was developed using WordPress, I think. I'm just trying to help out my friend, so I'm wondering if anyone has ideas why the images might be so slow to load and what I should look into as far as fixing them. Could it be as simple as image size or format? Or how they're loaded? Or where they're loaded from?
Any ideas are greatly appreciated. Here's the website URL: http://studiosaltdesigns.com/
There are more issues at play here than just large images loading slowly.
Testing load speed via http://tools.pingdom.com I can see there are over 10 .css files loading on the homepage and over 20 .js files (many of which aren't minified).
As the prvious answers suggest, you should think about optimising your images (reduce file size) but also try to minify and reduce the number of resources being loaded.
The way the site is built is it hides the images until they've loaded, with that being said your main first image is huge resolution of (3128x1505) the image should be a lot smaller around (1280x600) for full screen images and compressed greatly as that images size is 2mb when the most it should be is around 300-500kb. Hope that helps!
There are a few reasons for slow image loads.
Usually the most common I see are images are not optimized for the web. This meaning the picture resolution is more than 72. 72 being the web standard. Another reason may be very large images. Try to make the images smaller sizes and see what happens
I looked into the page source to try and get the image size. This site has many links and javascript links in the head of the page. Most of the time javascript links should be at the bottom of the body.
Look into optimizing the images. I use ImageOpt for mac. Here is the download link. It is free.
http://imageoptim.en.softonic.com/mac
Hope this helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 9 years ago.
Improve this question
When coding my website, I save HTML and CSS docs then refresh my browser to see the changes. However when I refresh the HTML changes are seen but the CSS changes aren't. Instead what I would have to do is close the window and reopen it again to see my CSS changes.
Any ideas why I cant just refresh and see the CSS changes instead of closing the window and reopening?
Try a "hard" refresh of your browser...
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
The idea is to bypass your browser's cache. Different browsers handle this differently, and this wiki article has a nice walk-through for each major browser on how to do this.
Alternatively, you could clear your browser's cache, which is also covered by the wiki article.
I think it's the cache problem.
How to locate the problem
If you are using Chrome or Firefox or Safari, just right click on the page and choose inspect element, and choose network tab.
Now refresh your page as usual, and you'll see all http request like this:
If the css file status is 304, means browser ask the server the css file, and server says: "no, you don't need to ask me, I gave you the css file before, it has not changed."
If the css file status is 200, but the size is from cache, it means the browser do not even ask the server for the file, the browser think he has the newest file.
I think you are in the second condition(200 from cache).
How to solve this:
you can always clear the browser cache to see the changes. Or you can disable browser cache for debugging purpose.
But you can't always tell your visitors to clear the cache, so the second method:
if you are using PHP or whatever as server language, append a query string to the css file name:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />
99% of the time, this will work.
if it's a static html page, you can change the css query string manually(or even the css file name, if you like).
Depending on the browser, it might be a caching problem.
There may be a setting in your browser that is preventing the Cache from updating.
Have you tried to reset your browser to defaults?
The reason I ask, is Firefox and Chrome handle this way differently.
If you clear the cache+cookies in Firefox, it might not take effect until you close ALL Browser windows.
Chrome will refresh the cache with each individual tab.
I would suggest maybe re-installing your browser because this definitely appears to be a local issue, but not affiliated with the css itself.