Grid Bloc 5 Foundation

Check out this code snippet:

HTML

<div class="medium-12 columns videos">
  <ul class="medium-block-grid-2 text">
    <li><iframe src="//www.youtube.com/embed/vid1" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid2" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid3" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid4" frameborder="0" allowfullscreen></iframe></li>
  </ul>
</div>

CSS

.video [class*="block-grid-"] > li {
  float: none;
}

I am attempting to target only the block grid within the "videos" div with the CSS rule `float: none;` instead of `float:left`, but I'm encountering difficulties making it work.

If I remove the .video selector at the beginning, the rule works but affects all block grids on the page. Any suggestions on how to solve this issue would be greatly appreciated.

htmlcsszurb-foundation

Answer №1

<section class="large-12 grid items">

Within your html file, the class assigned is for items.

However, in the corresponding css code, it is written as 

.item [class*="grid-container-"] > li {
  display: block;
}

Please update it to match the class name 'items'.

Answer №2

Consider the following:

.video ul[class*="block-grid-"] > li {
  float: none;
}

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

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

Utilizing min-height: 100vh; in my inner call to action div placed on top of a background video has been mostly successful. However, I've encountered an issue where using 100vh with the absolutely positioned video seems to introduce an unwanted margin ...

htmlcssruby-on-railsbootstrap-4

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...

htmlcssbootstrap-4

Django Template Syntax error: Unable to pass the remaining part

I recently started working on a Django project and I'm still learning the ins and outs of the Django framework. Upon running the application with python3 manage.py runserver, an error has popped up showing django.template.exceptions.TemplateSyntaxErro ...

pythonhtmldjango

Utilize Vue.js and express.js to distribute HTML files securely

Currently, my tech stack includes Vue.js for the frontend and Express.js for the backend. When I kick off the express.js server using npm start, my goal is to serve the Vue frontend component. By utilizing the Vue generator and Express generator, I attemp ...

javascripthtmlnode.jsexpressvue.js

Ways to increase the count in Vue Class Bindings?

Trying to utilize Vue class bindings, but uncertain about the syntax for bindings. I aim to append a numeric value to the class attribute, for instance class = "allstar50", then employ class bindings with the v-for directive to display a list of text items ...

javascripthtmlcssvue.jsvuejs2

Stopped due to an error: TypeError - document.getElementById(...) is not defined

Currently, I am working on developing a commenting system. Everything seems to be functioning well as long as there is at least one existing comment. However, if there are no comments present and an attempt is made to create one, an error message pops up d ...

javascripthtmldjangoajaxdjango-templates

unable to interpret information

I've encountered an issue with posting data to my webpage (page3.php). Despite using $test=$_POST['radio_second']; on the page, the test variable remains empty. Any help in resolving this would be greatly appreciated. Thank you! <p> ...

phphtml

Having trouble implementing render props for a toggle button that reveals/hides child components

My goal is to display or hide a couple of child components based on a toggle click using the original HTML structure provided. However, I am encountering an issue where the EditToggle link needs to be displayed next to the h2 element inside the "subtitle-c ...

javascripthtmlreactjs

The Typescript Select is displaying an incorrect value

Here's the code snippet I've been working with: <select #C (change)="changeSelect(zone.id, C.value)"> <option *ngFor="let town of townsLocal" [attr.value]="town.data" [attr.selected]="town.data === zone.town && 'selected& ...

javascripthtmltypescriptionic2

Scroll dynamically to a div upon clicking and looping through its content

When the user clicks on the first paragraph with the class "targetgo", I want the page to scroll to the element with the class "size1". The same goes for the second paragraph with the class "size2" and so on. As I will have more than 25 similar instances ...

jqueryhtml

Changing position attributes on fixed divs may not function properly on Android devices

Utilizing CSS transitions, I've successfully managed to make divs move, but unfortunately, this functionality does not work on Android devices. When the div is set to position:fixed, it remains static without any movement. Here is the original code ...

htmlcss

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext

Can someone help me convert this image into HTML/CSS code? I'm completely lost on how to do this and don't even know where to start searching for answers. Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcsstwitter-bootstrap

The vanishing act of custom fonts in Internet Explorer

This issue with a custom font embed is new to me. I have successfully used custom fonts on many client sites without any problems. One specific client has their own custom font files that are causing trouble. The application in question is embedded in an ...

cssinternet-explorercachingfont-face

What is the best way to apply CSS modifications to sibling elements that are related?

I have several parent div elements with pairs of button and div child elements. My goal is to apply changes to the corresponding div when a button is clicked. For example, clicking Button 2 should only affect toast 2. However, I am facing an issue where o ...

javascripthtmlcss

The menu bar button refuses to reveal its hidden options

Having some trouble with my dropdown button as a junior web developer. Resizing the screen causes the dropdown to not function correctly. Any help would be appreciated! <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> ...

htmlcssbootstrap-4frontend

What is the best way to send information from an MVC controller to JavaScript?

Being new to programming, I am working on 2 projects that function as client-server via Rest API. I am looking to create a column chart using data from a List of ID (participant) and Votes (Total votes) obtained from the server's connection with the d ...

javascripthtmljqueryasp.net-mvcasp.net-core

The CSS file seems to be ineffective when building Vue in production

In my Vue project, I am using a single file component with a chart module. In order to customize the styles of the chart module's CSS, I created a custom CSS file in the assets folder where I added lines to override certain styles (such as changing th ...

cssvue.jsamazon-s3gitlab-ci

What is the best way to have a single item in a list displayed in two columns?

Can the angular repeat achieve this functionality? I am looking to loop the two elements together. Any assistance would be greatly appreciated! Controller: $scope.date=[ {ID:1,Date:'2016-11-12'}, {ID:2,Date:'2016-11-15'}, ...

javascripthtmlangularjsangularjs-ng-repeat

Refresh the HTML page following a jquery click event

One of my onclick functions is designed to return sorted data in a specific format when triggered. Here's the code snippet for this function: $(document).ready(function () { $(".feedbackClick").click(function () { $.post("/Analyze/GetSorte ...

javascriptjqueryhtmlasp.netasp.net-mvc

When clicking on Submit, the code does not acknowledge the Verify Function

I am currently facing an issue with implementing the JQuery Ui function "Verify();" to ensure that the name, age, country, and date fields are completed before allowing form submission. Even though I have written the verify function to execute when the us ...

htmljquery-uisubmitverifyrequired-field