I have a Site that have(/will have) all my things on internet.
I'm doing the Works page that will contain all my projects (they already are on the site but not yet indexed, such as Aquarium)
My questions is:
Anyway to make a page preview for my Projects without having to take screenshot of the every page? (I already look into google and found nothing)
What i want to do is like this(done in figma):
(https://i.stack.imgur.com/B4ijk.png)
*edit 1: iframe is to hard to control, i wanna to transform this in a link and iframe simple dont work with it
Works fine for me
iframe {
display: block;
pointer-events: none;
}
<a href="https://example.com/">
<iframe src="https://example.com/"></iframe>
</a>
Related
I'm hoping someone can help direct me with troubleshooting for my portfolio page. I'm currently having issues with a few things and I'm not sure why or how to deal with them. Whenever I try to view them in tablet/mobile views on the deployed link the layout is completely different than when I run a live server with npm start.
The first issue about section in mobile and tablet views displays each paragraph in columns and the black background doesn't cover all of the text or the image.
The second issue is the contact page doesn't display the links on mobile even though the text color is set to black and the contact header doesn't show up on the page.
It was made in React. Below will be the deployed link and link to the github.
https://refactored-potato.netlify.app/
https://github.com/GSometimes/refactored-potato
I would really appreciate any help or guidance on sorting this out.
Thank you.
first piece of advice is that you have used TOO MUCH CSS, please use only what you really need. You don't need every css property to use on every element.
Your text/paragraphs are showing in column as their parent's display style is set first as inline and then flex. Either don't use it or write display: block
I have this CSS in a Razor Page project:
body {
background: url('../images/graphics/myimage.jpeg') no-repeat center center fixed;
padding-bottom: 20px;
}
The main body tag and link to the style sheet are in _Layout.cshtml.
The background image works fine everywhere except for pages other than index.cshtml in the mobile version of MS Edge browser; it works just fine in Chrome mobile. Works fine in all desktop browsers too.
I've only tested on Android.
According to your description, I come to the following conclusions:
Try restarting your Edge mobile and cleaning up its cache.
Check whether the image cache settings of Edge are limited;
Perhaps the Edge mobile belongs to the third-party software on your phone, so its speed is slightly slower. In addition, its compatibility with your phone's operating system affects the page rendering process.You could try different models of mobile phones to test.
For more:this link.
If the background image still cannot be loaded in edge mobile, hopefully you could provide information about the more code or settings that is related to browser loading.
I am trying to debug my AngularJS app where display:none is injected in tag as shown below:
This is how the img tag should be displayed:
<img ng-src="{{clientImage}}" style="margin: 0 0 0 5px;" />
This is what I get:
<img ng-src="{{clientImage}}" style="margin: 0 0 0 5px; display: none !important;" />
Can someone please help me by suggesting how I can trace how the (display: none !important;) is injected? Also any thoughts on what could possibly be injecting this in my img tag?
Notes:
- This problem happens only on some browsers but not all browsers, actually I've tried reproducing the bug on same browser version but on two different machines but failed.
- I am using Chrome latest version for testing
Turn off ad block.
I had an image named 'Advert.png', spent too much time to realize ad block was blocking it ¬¬.
This issue comes when adblocker extension is used in browsers when you'll pause you'll be able to see the images and this inline CSS will not be shown.
I had a similar situation. it was because of the ad blocker I had installed on Chrome. My application worked fine on Firefox which didn't have an ad blocker installed. But chrome didn't show an element.
After few hours of Googling I figured out that the id of the element which was not shown by chrome was the issue. The Id I had for the particular element was "post-ad". I changed it to "make-new".
That's it. It started working :)
I think Ad blockers find certain ID s and names of the html pages to decide whether to show it or not.
Hope this helps somebody
I had this happened to me when loading images from src attrib,
the inline style "style="display: none !important;" was added for some images.
Try disabling the angular inspector plugins in Chrome.
It happened to me in normal mode, but in incognito mode,firefox,opera,mobile everything was ok.
First of all, check in DevTools if it's showing which CSS rule hides that.
It should give you file and line. If it's not, try disabling Javascript to see if that helps. Or scan manually the files and look for .hide(), .toggle(), etc. (if jQuery is used).
To debug further, you can try to set the breakpoint on subtree & attributes modifications by selecting the element and in context menu select 'Break on...' (as shown below).
You may also try Visual Event. See also: How to find event listeners on a DOM node?
I have a silverlight application in a browser.
I want to open a url inside my application.
I've seen solutions that involve javascript and divs in the html file, it's not good for me since I don't have access to the HTML file in our project. I'm only developing my module which should be hosted in the end via MEF in the shell project.
In addition, I've seen that the webbrowser control working only in OOB applications.
Any help with be much appritiated.
take a look at the solution here.
You said you don't have the facility to change the HTML file, but that's no problem. Using the HTML Bridge, I was able to modify the example from Jeremy Likness (linked), and removed the following line from his html:
<div id="htmlHost" style="visibility: hidden; position: absolute;"></div>
Then recreated it in C# in the constructor for the HtmlHost class, as he calls it.
HtmlElement myDiv = HtmlPage.Document.CreateElement("div");
myDiv.SetAttribute("id", "htmlHost");
myDiv.SetAttribute("style", "visibility: hidden; position: absolute;");
HtmlPage.Document.Body.AppendChild(myDiv);
This gives you the effect you want without needing access to the original HTML.
I'm building a responsive website at the moment and the main site navigation contains 10 links. I've seen a few sites that compress their navigation into a simple drop down select menu when the screen size gets below 480px, but I can't find any tutorials out there that explain how to do this - apart from the CSS Tricks one here:
http://www.css-tricks.com/convert-menu-to-dropdown/
I've tried this tutorial but not had any success with it as I implemented the code and yes I get a lovely menu on the iPhone, but the links don't work and clicking on it makes the page zoom in which is not desirable as this doesn't happen when I don't have the menu in place.
I'm looking for something simple like used on these websites:
http://www.hanselman.com/blog/
http://www.lancs.ac.uk/
anyone?
I managed to find this snippet of code on http://www.w3schools.com here:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_selectmenu
Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.