I have a white box covering my content when viewing the website on a mobile phone not including tablets. It occurs once at the top under the first image slider, then again towards the bottom of the page... covering up a photo.
The website url is designandcrate.com
I have tried removing tags and adding tags so that the content will show up.
[span6]
[service_box title="Professional Staging with a Fresh Approach!!" subtitle=" With over 25 years of interior design experience in the residential and commercial world I am ready to focus on the area of staging! I recently renovated and staged a house in FL and loved the process and used new and older pieces to give a more realistic and fresh approach to the sometimes stagnant world of staging as a result!" icon="no" text="click "More" btn_text="See More" btn_link="#" btn_size="normal" target="_blank" custom_class="extra"]
[/span6]
I expected to see the content on my website, but can not see the content because of a white box covering the content.
ALSO a new discovery is that the issue could be a media query issue. Below is a photo of a string of code that could be related to what I am referring to.
image of code relating to media query
Screenshot of mobile view
Mobile view
mobileview
p.s. Sorry if I was not supposed to put a URL I am new to the forum...
UPDATE I have found a temporary fix to show content... but it does not get rid of the box itself that is causing a big space with nothing in it...
Here is the link to a video of how I did this.
https://imgur.com/r9dCzDz
Try adding in your themes' custom CSS area the following:
.header:before {
background: none !important;
}
Problem solved -- Thank you for the help.
.header .header_block {
border-radius:2px
}
.camera_wrap {
padding-top:30px;
margin-bottom:-80px;
}
body.home .header:before {
height:auto;
}
.clearfix {
padding:10px;
}
Related
I am trying to pull images from a database into an html table as a php variable:
<img src=img/$image&w=100&h=150>
the image does not show, but everything else in the table pertaining to the product shows
If I change the code adding a space after the variable:
<img src=img/$image &w=100&h=150>
The images show but they are very large.
How do I get $image to show at w=100 and h=150 within the table?
Thanks!!
OK I figured it out:
CODE:
<img src='img/$image' class='scale-down' style='width:100px;height:150px'>
CSS:
.scale-down {
object-fit: scale-down;
}
If the code below doesn't work for some reason, be sure you linked your CSS file.
CODE:
<img src='img/$image' class='scale-down'> <!-- Removed style attribute --!>
CSS:
.scale-down {
width:100px;
height:150px;
}
Another interesting point is if you want to you the object-fit then you can. Meaning you would have the images contained by the size of the elements you are putting them in. Therefore, you should be defining the width & height of the element that contains the images and then you can do as you did:
In this example I wrote td but I don't know what element contains your images so be sure to change it, if it is different.
td {
width:100px;
height:150px;
}
.scale-down {
object-fit: scale-down;
}
If your aim is to learn web-development then you should also be thinking about the client as kerbholz rightly points out:
Probably. Scaling down an image via CSS/style isn't a performant solution though, clients would still need to transfer for example a 1920x1080 image only to scale it down to 100x150. Anyway. – kerbholz
Please be aware that many questions about web development have already been answered here and on the web. Good luck!
The following are links to CSS, these websites have a lot more than just CSS.
MDN is really useful if you want to know more:
https://developer.mozilla.org/en-US/docs/Glossary/CSS
W3 is also useful but they don't always do as good of a job:
https://www.w3schools.com/w3css/
I have an account with Simple In/Out. We have 50+ employees and display their statuses (In/Out of office) on a TV at the receptionist desk. However we can't fit all of the employees on the screen without scrolling.
Simple In/Out provides very limited styling to how the list is shown. With CSS I could remove dead space and visually improve the list.
At first I would inspect element and make a few changes however the screen would get refreshed and all changes lost.
I am trying to simply make a .html page that displays an iFrame of the List with Local CSS edits.
The list url is simpleinout.com/list- login and the list displays.
The following 2 files display the page and an appended CSS file with changes however if I click anywhere else the CSS file is removed.
simple.html:
<html>
<head></head>
<body>
<iframe src="http://localhost/~JohnHarbert/simple.php" style="border: 0" width="1920" height="1080" frameborder="0" scrolling="no" ></iframe>
</body>
</html>
simple.php:
<?php
$content = file_get_contents('http://www.simpleinout.com/list');
$content = str_replace('<head>','<base href="https://www.simpleinout.com/" /><head>', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://localhost/~JohnHarbert/style.css" /></head>', $content);
echo $content;
?>
Again. The code does append the css file on the initial load(It adds it just before ). But when I click to display list. The css file is no longer added inside the Iframe.
You're help is much appreciated.
I'm the web developer behind Simple In/Out.
The easiest way to fit more users on your screen would be to use the font/column controls in the upper right. Once you've entered Full Screen mode, click on the gear icon in the upper right. It will allow you to choose anywhere from 2 to 6 columns of users and you can adjust the font size to fit more on the screen.
Hope that helps!
I'm using Wordpress to create a blog and I noticed that when I save a post multiple times, a weird element appears in the code, creating a big white space in the bottom of the post.
The code looks like this:
...post content
<object id="ba7ab859-2a8a-9fa1-988a-4a9938aba59b" width="0" height="0" type="application/gas-events-abn"></object>
Every time I edit a post I have to remove it. With Joomla sometimes used to happen the same thing. What can I do to solve this?
This tag is added by protection bank plugin developed by Gas Tecnologia, a brazilian company, expert in internet security. This company provides service to the banks: Banco do Brasil, Caixa Econômica Federal, Itaú, Santander, Banco Mercantil do Brasil, Banco da Amazônia, Banestes, Tecnocred/Unicred.
I contacted the company to find out why the "tag object", but so far not replied.
If you wish this is the link to site of company: http://www.gastecnologia.com.br
As said by Vinicius Monteiro, this is a serious bug from the crazy devs on Gas Tecnologia. The hack-ish way we're using to solve this is adding this piece of CSS to your pages:
object[type^=application/gas-events] { display: none; }
I did some adjust to hide all elements with contains the word application/gas-events:
object[type*='application/gas-events'] { display: none; }
Your site (or browser) has been hacked. You can find the same string with varying id in some forums:
social.msdn.microsoft.com
social.technet.microsoft.com
answers.atlassian.com
forum.dancehallreggae.com
many more.
Other findings
Most of the affected sites are Brasilian.
According to this tweet, the tag is generated by a Santander protection module.
Same thing with "GBBD Caixa Economica Federal" extension (Chrome), putting this "application/gas-events-abn" everywhere. Seems to be a common problem with intern banking extensions.
And to get worst it's impossible to deactivate while not using internet banking (at least in Chrome), the only solution is remove the extension or clean the post content field AND the excerpt field if it have tinymce activated.
body + object, body + object + object { display: none; }
I placed that on my Stilysh Chrome Extension and solved the problem just fine since they put the objects always in the footer (in my case there where 2 of them, CEF (caixa economica federal) and BB (banco do brasil) if you have more banks, just add more objects ;)
In my case, the class object had height 100%. I just commented the code.
object, embed{
/* height:100& */ I commented this height, because it leaves a space under the footer;
}
I am using LayerSlider - The Parallax Effect Slider in my website dtraffic.biz but I am having problems with it. I have had to delete many lines of page.css so that the logo keeps in its place and now everything seems ok but I would like to reduce the space that is left between de LayerSlider and the next section (the one that says: member and advertisers).
Any suggestion?
Note:
My website is designed in php, it has a two files distributing the desing on the homepage, layout_header.php and layout_footer.php
Add the following in your css
.dim { margin-bottom: -40px; }
This will adjust the space below the dim div which is containing the slider.
Try giving a -ve (negative) margin-top to <div class="bc-w2"> in your CSS
coding a responsive site I want to implement a switch between a mobile version and a standard desktop version like the Wikipedia site does.
For this I should have to re-load the current HTML file but force it to use the CSS file for desktops although it is on a mobile screen such as an iPhone.
Is there any possibility to do so? I think Wikipedia uses PHP. But perhaps there is also a way with JS.
I would be very thankful for help. Thanks in advance.
#media handheld {
#foo { position: static; }
}
http://www.w3schools.com/css/css_mediatypes.asp
I think with USER_AGENT you can find if the user is using the site using web or mobile.
Detect the user agent look for some specific information and on the basis of that load different css
$_SERVER['HTTP_USER_AGENT'];
You could also use a php script that checks for the end device, loading a corresponding css file, or even a completely different html document. I worked from this script.
<style>
#media screen
{
p {font-family:verdana} //an example with a paragraph
}
#media handeld
{
p {font-family:arial} //an example with a paragraph
}
</style>
This should work for both!!
read up http://www.w3schools.com/css/css_mediatypes.asp