utilizing CSS on a feedback platform (survey gizmo)

I'm relatively new to web programming, dabbling with bits of HTML and CSS. My understanding is quite limited in this area.

As I face my current dilemma, I wonder whether it's due to my lack of coding knowledge or if it's a limitation of the survey tool itself.

In Survey Gizmo, there is an option to create 'custom CSS' coding externally to the survey, acting like a CSS stylesheet where multiple styles can be stored.

You can link these styles to each page or question within the survey, as well as modify the head of the page using 'custom HTML' placed in a separate document.

Despite seeking help from Survey Gizmo (SG), they suggest that I either comprehend the process or pay for their programming services.

My goal is to have a video player on one side of the screen while having a set of questions on the other side that can be scrolled through independently.

The examples provided by SG for CSS appear like:

.width-33{ 
clear: none; 
float: left; 
width: 33%; }

I struggle to grasp concepts such as classes or styling names. However, I have managed to apply the given code successfully to a survey question by inputting "width-33" into the custom CSS style field.

What I aim to achieve is similar to what's demonstrated at http://jsfiddle.net/avrahamcool/QMsuD/1/, albeit in a different orientation.

The CSS from that example includes:

* {
    margin: 0;
    padding: 0;
}
html,
body,
.Container {
    height: 100%;
}
... (Remaining CSS code)

While the accompanying HTML structure is as follows:

 (HTML code structure)

Finding it challenging to implement this structure within SG, I seek advice from experienced programmers on how to integrate this complex layout into the survey tool effectively.

Is it possible to convert the CSS snippet into an external stylesheet? Will assigning the CSS styles "leftContent" (video player) and "rightContent" (questions) make the setup functional?

If you have any insights or suggestions on achieving this design in SG, including utilizing JavaScript features, please share them!

Answer №1

In response to your initial inquiry, let's delve into the essence of this code snippet.

.width-33 { 
    //The float property allows elements next to an object with this class - though it is redundant as this property is default.
    clear: none;
    //Aligning the object to the left of its parent container, items with float:left will be positioned alongside each other.
    float: left;
    //The width is set to 33% of the parent container's width hence the naming of the classname.
    width: 33%; 
}

Correctly identified as a class, when applied to a div like so:

<div class="width-33"></div>
, it will inherit these specific properties.

At this juncture, understanding how styling can be implemented within Survey Gizmo remains unclear. You mentioned utilizing an external stylesheet assigned to various questions along with a 'custom HTML' segment.

To achieve your intended outcome, the custom HTML aspect seems pivotal. Targeting the overall survey container rather than individual questions calls for identification of their respective classnames or ids.
In case clarity lacks in the survey editor or dashboard, inspecting the survey and delving into the source code via the inspector tools might provide insights on naming conventions.

Once you've identified the necessary components, proceed with designing your layout.
A simple layout indeed which can be optimized even further compared to your existing example.

The video-container and questions-container must sit adjacent while occupying the complete screen height. Additionally, allowing scrolling functionality inside the questions-container is essential.

.video-container {
    height: 100vh; 
    float: left;
    width: 40%; 
}
.questions-container {
    height: 100vh;
    float: left;
    overflow: auto; 
    width: 60%; 
}

Opting for 100vh instead of 100% eliminates the need to ensure parent containers also share a height of 100%. This cascades all the way to the <body> tag as demonstrated in your original code block.

If positioning of the containers proves challenging, excessive margin or padding could potentially be causing extra width. Rectifying this would involve resetting margins and padding by using padding: 0; and margin: 0;.

Should padding be desired, include the following styles:

.video-container {
    height: 100vh; 
    float: left;
    width: 40%;
    
    box-sizing: border-box; 
    padding: 20px; 
}

Trust this explanation aids in your coding endeavors.

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

Get rid of any fonts that are causing rendering delays on amp pages

Encountering issues with Google Lighthouse and AMP Pages https://i.sstatic.net/EXiha.png I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400, ...

Is it possible to rearrange the sequence of HTML DIV's exclusively through CSS?

I need to style a webpage with specific requirements that involve positioning various DIV elements without altering the HTML file. The Header DIV must be at the top of the page with 100% width, followed by the Navigation DIV (25% width) on the left side b ...

What is preventing me from adjusting the padding of the mat-button?

Trying to adjust the default padding of a mat-button, but encountering issues with changing the component's style. Any suggestions on how to subscribe to the default padding (16px)? I've attempted modifying CSS properties to set the padding of a ...

What is the best way to alter the font size in an SVG?

I have incorporated an SVG icon into my website and obtained the following code from Adobe Illustrator: <svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9, ...

Instructions on adding a class to a span within a div upon clicking the div

Is there a way to dynamically add a class to the span element inside a specific div when that div is clicked? There are multiple divs and spans with the same class name. $('.menu_item_conteiner').click(function() { $('.menu_item_conteiner ...

Appearances of sessions are not visible, however, they can be confirmed to exist based on the

Puzzling! I am facing a strange issue with my webpage. I have stored some sessions, but when I try to print them, nothing appears on the page. The interesting part is that while the first page fails to show the sessions, a link on that page leads me to ...

Struggling with aligning buttons in a horizontal navigation bar

I have been struggling to center the buttons on my navigation bar for quite some time now, despite my efforts searching through Google (I'm still a beginner in CSS). Below is the code I have for the navbar (excluding my numerous unsuccessful attempts ...

What is the best way to align the content of an HTML page in the center using

I'm currently working on a basic webpage and I'm trying to center it using only Bootstrap code (if possible). This is what I have tried so far, but the col-xl-offset-4 doesn't seem to be working. <script src="https://ajax.googleapis.co ...

Techniques for preventing background layering using CSS

I have implemented a background image on the <input type="submit"> element to give it the appearance of a button. My CSS code looks like this: input.button { background-image:url(/path/to/image.png); } Furthermore, I would like to display a dif ...

revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them. .row { padding-top: 25px; } .c ...

Putting Images Next to Each Other - Arranging Them to Be Responsive

I have a pair of images on my webpage that I've aligned next to each other. To enhance the mobile user experience, I want these two images to stack on top of each other when viewed on smaller screens. If anyone can provide guidance on creating respon ...

Maximizing search engine meta tag efficiency

Need some help. About a month ago, I attempted to optimize my website for search engines like google. However, instead of improving visibility, it seems that my site has completely disappeared from google search results after about 1.5 months. The header ...

How come the ".includes" method is not functioning properly with my two-dimensional array?

Introduction: As part of a school project, I am tasked with creating a program that checks answers in a "test" to determine their correctness. This project requires the use of a two-dimensional array and the ".includes" function. Requirements: Mand ...

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

Issue with Angular 9 Json pipe not showing decimal values

My JSON data looks like this: this.data = {"eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": 0.0, "pendingApplicationCount": 24.0, " ...

Is incorporating CSS advisable in Karma Unit level tests for AngularJS projects?

Imagine your JavaScript code is running some element or position calculations within an AngularJS directive. When testing this JavaScript code, should CSS be included in karma.conf.js? I've noticed that some popular projects have included CSS files. ...

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here. Despite watching tutorials, everything seemed too confusing. var root = document.q ...

Update the styling for the second list item within a specified unordered list class instantaneously

Looking to emphasize the second list item (li) within a selected dropdown list with a designated unordered list class of "chosen-results". <div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-proc ...

Retrieving Data from Outside Source using AngularJS

Is there a way to retrieve JSON-Text-Stream data from a specific URL (e.g. SOMEURL/ean.php?id=4001513007704)? The returned result typically appears as follows: { "product": { "ean_id": "4001513007704", "title": "Gerolsteiner Mineralw ...

The problem with the CSS3 media query arises only within a particular div and not on

I've been encountering an issue with one of the media queries on my website. Specifically, the query targeting a div in the footer is not working as expected. I'm wondering if there's a problem with how I've written the notation? @medi ...