CSS for horizontal scrolling

Hey there, I'm in the process of putting together a page at [link removed].

The top header is currently set at a large size of 1600px to cater to wider monitors. Unfortunately, setting it to 100% width is causing some strange rotation effects.

To prevent a horizontal scroll bar from appearing, I've set the body overflow-x to hidden. The goal is for the layout to work well on standard computer resolutions.

The challenge arises when accessing the page from a device with a very small resolution, like a mobile phone, or when resizing the browser window. In these cases, having horizontal scrolling would be beneficial, but it should only scroll enough to view the image and not beyond.

Does this explanation make sense to you? Feel free to let me know if I need to provide further clarification...

I've experimented with various combinations of min-width and overflow-x settings for both the body and header, but so far, I haven't found a solution that resolves the issue.

Any suggestions would be greatly appreciated!

cssscrollhorizontal-scrolling

Answer №1

For handheld devices, you can use this code: 

<link rel="stylesheet" media="handheld" href="%%%.css" type="text/css" />
and then set the overflow-x to auto in the handheld stylesheet. Alternatively, you can utilize JavaScript to load a stylesheet based on the screen resolution.

<script type="text/javascript">
if (screen.width < 1024) 
</script>

Answer №2

My response complements what 0x60 has shared.

I suggest utilizing CSS Media Queries over JavaScript for detecting screen widths.

Here's an example:

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
/* Styles */
...
}

Take a look at these resources:

  1. Media Queries for Standard Devices
  2. How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with the transform attribute in CSS

Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...

htmlcss

The logo in the Bootstrap 4 beta navbar-brand does not dynamically resize when the navbar collapses, even with the img

Bootstrap 4 Beta Usage Incorporating a logo and inline menu links in the responsive navbar of my website has been a challenge. While the navbar collapses appropriately with viewport changes, the logo fails to shrink proportionately. This results in the ha ...

csstwitter-bootstrapbootstrap-4

Detect if the user is using Internet Explorer and redirect them to a different

My web application is having trouble rendering in Internet Explorer. In the meantime, I would like to detect if the user is using IE and redirect them to a different page specifically for IE visitors. What is the best way to accomplish this? Should I use ...

phpjavascripthtmlcss

The element's height appears to be fluctuating unexpectedly when I attempt to adjust it using percentage values within a narrow range

I'm utilizing React and Bootstrap in this project. Here's an overview of my code: I have an element with height set to 0, in rem. My goal is to make the height of this element increase as I scroll down the page, creating the illusion that it is ...

javascriptcssreactjsbootstrap-5

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

Having trouble echoing this PHP code due to issues with single quotes, causing the HTML to end prematurely. Any suggestions on how to fix this? function button($conn){ $sql = "SELECT * FROM table"; $result= mysqli_query($conn, $sql); while($r ...

javascriptphphtmlcss

Tips for aligning text to the right and button to the left while ensuring responsive design with CSS

Trying to align text on the left and the button on the right with space between them in a responsive card design. The button has a background image added to it. Here is my attempted CSS, but the design is not yet fully responsive: .component { disp ...

htmlcss

Disable automatic focusing for a material-ui popover component

I am struggling to create a search match list that updates as the user types in their query. However, I am facing an issue where the input element loses focus to the pop-up. I have attempted to programmatically set the focus using refs, but I am unable to ...

javascriptcssreactjsmaterial-ui

Tips for centering fontawesome icons in your design

https://i.sstatic.net/Atian.pngI'm facing an issue with aligning 3 icons. My goal is to align them, but every time I attempt something, the first icon ends up in the middle of the page instead of the second icon where I want it to be. .item-icon { ...

htmlcss

Explore our interactive map and widget features that will seamlessly fill your browser window for a

Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...

htmlcssgoogle-mapskendo-ui

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

cssbootstrap-4media-queries

Angular dropdown button positioned to the left side

I'm encountering a slight issue with a dropdown button while working on making my website mobile-friendly. My goal is to have the button drop down on the left-hand side of it. Below is the snippet of my html code: <!-- A div element for the button ...

htmlcssangulartypescript

Revamp the layout of the lower HTML video menu

Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: auto; } </style> </head> <body> <video width="400" controls> ...

javascripthtmlcssvideohtml5-video

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

cssangulartypescriptfrontend

What steps should I take to ensure my HTML project displays correctly on mobile devices?

Hey everyone, I recently completed a website and optimized it for mobile viewing by working on a window with the lowest width allowed by Chrome. However, when I checked it on an actual cellphone, it was displaying as if on a widescreen PC. It seems like th ...

htmlcssmobilebootstrap-4

Clicking on the button will advance to the next tab rather than selecting the tab

I have this code snippet in HTML: $(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(th ...

javascriptjqueryhtmltwitter-bootstrapcss

The display of table headers varies in IE7

I am experiencing an issue with a table that has headers, each containing a span element with a background image serving as a separator between the column headers. While the display looks correct on most browsers, on IE7 the separator image (which is with ...

htmlcssinternet-explorer-7

Styling CSS variables uniquely

I have limited knowledge of HTML and CSS, so I am unsure how to search for a similar post on StackOverflow. My apologies if this is a duplicate question. I am looking to achieve the following: margin-horizontal { margin-left: value; margin-right: va ...

javascriptcss

Utilizing Flexbox for a standalone section

I have a specific section in my HTML where I want to utilize flexboxes. The CSS provided is affecting all other rows and columns in my code. How can I ensure that this CSS only impacts the specific HTML section I have included here? Thank you! .row { ...

htmlcsstwitter-bootstrapflexboxcss-selectors

CSS-exclusive dropdown menu elements peeking out

I have been working on a CSS-only drop-down menu and I am encountering an issue where other content seems to be showing through. Despite my efforts, I can't figure out why this is happening. If you would like to take a look, here is the link: http:// ...

css

Positioning Tumblr blockquotes beneath each other, rather than within

Just diving into the world of HTML/CSS and I've been working hard on creating my own Tumblr theme (almost finished!). One issue I'm having is styling the replies, which are in blockquote form. I want them to display one after another in a line li ...

htmlcsstumblr