Currently, I am delving into the creation of a website completely from scratch to serve as an online CV for networking and job/school applications. My journey with HTML and CSS is relatively fresh, having started only about 5 months ago. Overall, things have been going smoothly except for one issue: on mobile devices, the background sections on my page are truncated instead of extending all the way to the right side of the screen. Interestingly, on desktop, it appears as intended. Any assistance or recommendations would be greatly appreciated as I find myself a bit lost on what steps to take next.
The following snippet comprises the HTML and CSS code from my page:
Various screenshots showcasing the desired layout on Desktop alongside the output on Mobile where the background experiences cropping can be viewed below:
[View Desktop Screenshot][1]
[View Mobile Screenshot][2]
Note: Despite trying to implement the specified code in my CSS file to set the widths of html and body elements at 100%, no significant changes were observed. Additionally, experimenting with adding width: 100% to the "section-segmenter" class did not yield the expected outcome either.
An update after editing: Implementing this code snippet within the head tag resulted in slight alterations, albeit merely squeezing the section further.
<meta name="viewport" content="width=device-width, initial-scale=1.0">[![Mobile View][3]][3]
Update after edit: To address the issue more effectively on mobile devices, I incorporated a media query that expands the width of 'section-segmenter' to 1300px when the maximum screen width reaches 600px. This solution appears to alleviate the problem on mobile devices to some extent. However, recognizing it as a temporary fix, I plan to explore converting the units of the table widths on my site to percentages, as suggested by user David Taiaroa.
@media only screen and (max-width:600px){
.section-segmenter:nth-child(even){
background-color: var(--light);
position: relative;
left: 0;
right: 0;
z-index: 0;
padding: 15px;
width: 1300px;
}
}