Decreasing the vertical size of the page

My mobile page was meant to be all black, but it's only half black now.

I tried the following CSS:

@media (max-width: 768px) 
{body, html.page-id- 
28{background-color: 
black! important;}}

@media (max-width: 768px) 
{. parallax-window 
{background-color: black! 
important;}}

After that, I wanted to reduce the height of the page:

 @media (max-width: 768px) {.page-id-28{height: 600px
!important}}

Unfortunately, it didn't work as expected.

Now my page has a mix of black and white sections and I can't get the desired height using important. The background flashes black when the page loads, then switches to white.

What could be causing this issue?

<div class="parallax-window fullscreen" data-parallax="scroll" data-image-src="http://4309.co.uk/wp-content/uploads/2019/08/download-2.png" data-ios-fix="true" data-over-scroll-fix="true" data-android-fix="true">
            <div class="align-transform">

                    <div class="row">


                        <div class="top-parallax-section">
                            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
htmlcss

Answer №1

To enhance the responsiveness of your website, it is recommended to eliminate the height: 600px !important property in the CSS. Additionally, there seem to be several fixed heights specified in the CSS that should be removed within the mobile @media queries.

@media (max-width: 768px)
.parallax-window {
    background-color: black !important;
    /* height: 600px !important; */
    top: -400px;
}

https://i.sstatic.net/8Noh8.png

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

Switching colors on SVG when hovering

When I hover over the code below, I want both eyes and eyebrows to change color. I've managed to get it working for the left eye, but not the right eye. Additionally, the fill on the right eyebrow looks strange when hovered over. I suspect this issue ...

csssvghover

Can a list be transformed into a toolbar in a responsive design?

Here is my card with a nav section that includes multiple items (although I've only included one here for simplicity). <div class="col-md-3"> <div class="card"> <div class="card-header"> ...

cssbootstrap-4sass

Verify the tags associated with an element that has multiple tags

For a test I am conducting, I need to examine the tags and styles present in a specific element. The element, displayed on the page as bold, italic, and centered, looks like this: <p style="text-align: center;"> <em> <strong>TE ...

javahtmleclipseseleniumtags

Analyzing HTML using Spark

My current project involves: Loading html sources from a csv file Developing functions to extract specific features from the html source. In the past, I used Python with BeautifulSoup for this task. However, my approach has now shifted to using Spark and ...

htmlscalahtml-parsingapache-spark

No match was found for the reverse of 'idname' with arguments '()'. Attempted 1 pattern: ['viewRegistration/(?P<pk_test>[0-9]+)/$']

When setting up my views, I have the following code: def home(request): if request.user.participant: current_user = request.user subscriptionUser = int(Subscription.objects.get(participant=current_user.participant).id) else ...

pythonhtmldjangoview

I'm puzzled by why my newly purchased website domain occasionally redirects me to the outdated webpage

My website was previously hosted with n*agahoster but we decided to switch to a government server and change the domain from example.com to example.gov.xx. The transition was smooth, as someone managed the server and I provided backup files (public_html an ...

phphtmlwebserverhosting

Button with tooltip for easy access to trigger a modal dialog

My task involves creating a button with a tooltip that displays simple statistical information to the user, such as a student's grades (e.g., "Homework: 100%, Exams: 85%"). Upon clicking the button, a modal should appear with more detailed information ...

htmlaccessibilitybootstrap-5screen-readers

Interactive Django table using AJAX

This marks the second question in a series regarding my Django project. The code utilized here contains sections borrowed from this post: Stack Overflow The goal is to implement a dynamic table that cycles through objects in a list (currently set at an in ...

htmlajaxdjangodjango-templatesdjango-views

Creating files for two HTML pages with Vue: A step-by-step guide

Currently, I am working on creating two HTML files as part of my project structure. This is how it looks: |- node_modules |- public | |- blog | | |- some-page.html | |- index.html |- src (contains all the Vue components) |- Blog.Vue |- Index.Vue ...

htmlvue.jsvuejs2vue-cli-4

JavaScript - Unable to Modify Select Value with Event Listener

It's interesting how I can change the selected option in a dropdown list using JavaScript without any issues. However, when I try to do the same thing within an event listener, the option does not seem to change. Here's the HTML code: <select ...

javascripthtml

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

javascriptjqueryhtmljson

issue with JavaScript canvas

My task is to develop a Blackberry application, but I have limited knowledge in Java. Since the application requires drawing capabilities, I decided to use HTML5 and JavaScript instead. I started reading some JavaScript tutorials to prepare for this proj ...

javascripthtmlcanvas

PayPal form without encryption

Once upon a time, I recall creating a button in Paypal which provided me with a standard HTML form. However, now everything seems to be encrypted. Is there a way to retrieve an unencrypted format? I need to be able to manually adjust the price using jQuer ...

phphtmlencryptionpaypal

Enhance the current menu item in WordPress by assigning a class to the anchor tag

function updateActiveClassOnMenu($item_output, $item, $depth, $args) { $menu_locations = get_nav_menu_locations(); if ($item->menu_order == 1){ $item_output = preg_replace('/<a /', '<a class="active" ', $item_o ...

phpjqueryhtmlcsswordpress

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property. Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the # ...

javascriptjqueryhtmlcss

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

javascriptcsshtmljquery-pluginssvg

How to Adjust the Padding of Tree Row in GWT?

Have you ever seen a GWT tree before? It sort of resembles the following structure: <div class="gwt-Tree"> <div style="padding-top: 3px; padding-right: 3px; padding-bottom: 3px; margin-left: 0px; padding-left: ...

javacssgwttree

Don't display div if database has certain value - Angular

Is there a way to determine if a specific value exists in a PostgreSQL database? If so, can I then hide an HTML element based on this information? Can CSS and JavaScript be used to hide elements, or is there another method that should be utilized for hidi ...

javascriptcssnode.jsangularpostgresql

Enclosing two smaller boxes within a larger box

I'm attempting to replicate the layout shown in the desired.png file (specifically with an outer box surrounding two inner boxes). Currently, my code doesn't display the expected outer box around the two inner boxes. How can I modify it to achie ...

htmlcss

Issues with redirection to registration page in PHP Slim framework

When I access localhost/path/home, it takes me to the homepage where I can either login or signup. Clicking on either option should redirect me to localhost/path/login or localhost/path/signup respectively for the login or signup page. However, there seem ...

htmlanchor