Hello,
I am trying to target a specific column to add a new breakpoint to. (as seen in the attached screenshot) But it is applying to all of those columns. I cant figure out the exact selector. can you please help. Here is the url: https://jpdigitalstudios.com
when I select this ( .x-section .x-container.marginless-columns>.x-column[class=“x-”]**) it works but applies to all those columns obviously. I added an id but it still didnt work. Thanks
Hey @Jennine,
The ID was not used in the selector your posted. It should be .x-column#your-id and not .x-column[class="x-"] as the latter targets all columns.
Hope that helps.
hello
thanks for your response. I made the adjustment but it is still not working. Heres my code:
@media only screen and (max-width: 1035px){
.x-column#hero-form{
display: block;
width: 100% !important;
vertical-align: inherit;
}
}
Hi again,
I checked your site and your CSS is being applied but your CSS code will not do what you’re trying to achieve. Replace your code with this:
@media screen and (max-width: 1035px) {
#hero-form{
display: table-row !important;
width: 100% !important;
vertical-align: inherit;
}
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Hope this helps!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.