Currently undertaking The Odin Project, my task was to replicate the Google homepage. However, I have encountered a challenge that I am struggling to resolve. I attempted to use box-sizing: border-box; to prevent the page from extending beyond the width of my screen, but unfortunately, my Google page is excessively wide. You can view my project on github here: https://github.com/JohnEnglund/google-homepage
What you may not have realized is that the box-sizing: borderbox; property operates in a unique manner. As stated by W3:
The box-sizing property determines how the width and height of an element are computed: whether they should encompass padding and borders, or not.
border-box: The width and height properties (as well as min/max properties) include content, padding, and border.
By incorporating this property into your CSS, it grants the browser the capability (as per MDN):
to consider any border and padding when interpreting the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will encompass any added border or padding, causing the content box to adjust to accommodate the additional width. This typically simplifies the process of sizing elements.
In conclusion, if your page appears excessively wide, it may be due to incorrect configurations within your CSS file. Consider applying a background color to your elements to evaluate their width accurately. This serves as an effective debugging feature for CSS.
The problem doesn't lie with the border box property, but rather with the width of your inner elements. The main issue stems from how you're positioning the elements. It's best to refrain from specifying top, right, etc. positions in pixels. Instead, utilize margins and consider reducing the width of your elements if necessary. Here are some changes that I've implemented:
header {
display: flex;
/* width: 90%; */
height: 4.8vh;
/* margin: auto; */
/* align-items: center; */
margin: 10px;
position: relative;
}
.profile-pic {
/* position: relative; */
/* left: 92%; */
border-radius: 50%;
height: 4.8vh;
}
.logo img {
height: 92px;
width: 272px;
margin:auto;
/* text-align: center; */
}
.logo {
padding-top: 47px;
/* position: relative; */
text-align: center;
/* left: 500px; */
top: 25px;
}
.language {
font-size: small;
position: relative;
/* left: 590px; */
text-align: center;
}
.ending {
display: flex;
list-style: none;
position: relative;
/* right: 880px; */
flex: 2;
padding-left : 50px;
}
.btm-navlinks {
margin-right: 30px;
color: rgba(0, 0, 0, 0.54);
}
Introduce a div wrapper around the header elements to shift them to the right:
<header>
<div class="header-wrap">
<nav>
<ul class="nav-links">
<li><a class="nav-link1" href="#">Gmail</a></li>
<li><a class="nav-link2" href="#">Bilder</a></li>
</ul>
</nav>
<div class="burger-menu">
<a href="#"
><img
class="burger-menulink"
src="./Pictures/Skärmavbild 2020-07-07 kl. 17.33.43.png"
alt="burger-menu"
/></a>
</div>
<div class="profile-pic">
<a href="#"
><img
class="profile-pic"
src="https://lh3.googleusercontent.com/ogw/ADGmqu_I3j_aWjRLGl97SmvJwotO5yAsUOC4AmXnL7MK=s192-c-mo"
alt="profile picture"
/></a>
</div>
</div>
</header>
.header-wrap{
position: absolute;
right:2%;
display: flex;
align-items: center;
}
Avoid using external images within input text; consider the background property instead
.form-control-search {
display: flex;
border: 1px solid #dfe1e5;
box-shadow: none;
border-radius: 24px;
z-index: 3;
height: 44px;
margin: 0 auto;
width: 50%;
outline: none;
margin-top: 40px;
font-size: 17px;
background-image: url(./Pictures/mglass.svg), url(./Pictures/voice_icon.svg);
background-position: left, right;
background-repeat: no-repeat,no-repeat;
padding:0 4% ;
}
.form-control-search:hover {
box-shadow: 0 0 11px #dfe1e5;
}
Get rid of the image divs and wrap a button around your buttons instead:
<form
action="https://www.google.com/search"
class="search-form"
method="get"
name="serachform"
target="_blank"
>
<input name="sitesearch" type="hidden" />
<input
type="text"
autocomplete="on"
class="form-control-search"
name="q"
required
/>
<div class="button-wrap">
<button class="button" type="submit">Search on Google</button>
<button class="button" type="submit">I'm Feeling Lucky</button>
</div>
</form>
.button-wrap{
margin: 10px auto;
width: fit-content;
}
Remember to save the two SVG images in the Pictures folder as mglass.svg and voice_icon.svg
With these changes, you should be all set to go...
PS: Only use position:relative when absolutely necessary
I recently removed the reference to the master page from the head section @{ Layout = null } After making changes in my CSS: html { background-image:url('Images\BGP.jpg'); } However, I didn't see any changes. Any suggesti ...
Here is the URL for my website: . On this page, there are two fields - category and subcategory. When a category is selected, the corresponding subcategory should change accordingly. This functionality works smoothly in Google Chrome, however it encounte ...
<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...
I am trying to adjust the min-height of content2 to be equal to the screen height minus the height of other divs. In the current HTML/CSS setup provided below, the resulting outcome exceeds the screen height. How can I achieve my desired effect? The foote ...
After clicking the button, I expect data to be inserted into my MySQL database. However, it only inserts the data when I manually reload the page. Below is the code snippet: <script> function minuscredits() { alert("hah"); <?php mysql ...
I need help with positioning elements in my HTML layout. I have one element stacked below another and am using relative positioning to nudge the bottom element up slightly so that it overlaps the top element. The paperOverlay element is positioned at the ...
While attempting to collect data from a local host webpage's registration form that captures user information, I encounter an issue upon pressing the submit button A 404 Error is displayed stating "page not found", preventing the collection and out ...
I'm struggling to make an active icon selector work with the after pseudo element. Here is the code I have attempted: <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-alig ...
Check out my GitHub repository: https://github.com/Snipervuk/ChristianMilicevic I'm encountering an issue where my HTML images or videos are not displaying on my GitHub pages online, but they do display locally. I've attempted several solutions ...
Seeking Solution I am facing a challenge in using an internal link within the <a> tag to navigate to a specific section of another component by HTML ID. My Exploration First, I visited this site: https://www.w3schools.com/html/html_links.asp bu ...
Struggling with adjusting the height attribute for the content within a modal window. Desire for the content in the modal window to occupy 100% of the space, but unfortunately only reaching around 30%. Curious as to why this limitation exists and seeking ...
I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...
Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code >, which historically has represented ">". Oddly enough, while viewing my website ...
Having an issue with compatibility in the safari browser You can check out the site here: The problem lies with the text inside the image, I want it to display properly like it does in Chrome. Here is the desired result for Safari as well. Below is the ...
I am looking to create a table in HTML/CSS with 4 cells stacked on top of each other. I have a couple of questions: How can I set the width and height for each cell individually (with varying heights), while ensuring that there are no scroll bars if th ...
I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functio ...
I've implemented Angular UI Router in my Angular application and configured HTML5 mode to remove the # from the URL using $locationProvider in the config. var app = angular.module('openIDC', ['ui.router']); app.config(function($ur ...
Hello, I'm trying to position my footer below my side navigation bar. It's working fine with the header, but I can't seem to figure out how to do it for the footer. Also, another question - how can I ensure that the text on a smaller screen ...
When using inner HTML to dynamically retrieve divs with SQL Server data, I am encountering an issue where the div arrangement is not aligning horizontally. I need assistance in aligning them horizontally. Thank you. pnl_default.Visible = true; ...
Would love to create a web application for real-time debugging similar to "android->developer options->show touch data" or "android->developer options->show CPU usage". Unfortunately, I have not been able to find a suitable method using HTML5 ( ...