[elise83Participant]

Hi,

1) Responsive text : is there a quick way to decrease the size of each Heading (h1, h2…) for cellphone instead of going to ”advance settings” within cornerstone and create a class for EACH ONE and then –> compression/ max and min size…?
In other word, with 1 code, all the h1 will be 12px for example…

2) How do I make a responsive video player? I guess, i need to create a class as responsive text. If so, same thing as above, is there a quicker way than creating a class -> compression/ max and min size…

3) How do I make responsive feature box? same thing…

Thanks and cheers 😉

[elise83Participant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in!

#1. You can set a font-size in Style field but will be fixed for all device. You can set a class on the Class field and then define the font size for specific screen through media query :

@media only screen and (max-width: 979px) {
  .custom-class {
     font-size: 12px;
   }
}

There is no other alternative than using Responsive Text feature or the mentioned workaround.

#2. Responsive video and Responsive text are not same. You can use the Video Player element to create responsive video – http://prntscr.com/ajogp0

#3. Feature Box is already responsive. Also note that all elements of X is already responsive.

Cheers!

[elise83Participant]

Hi again!

RESPONSIVE QUESTIONS
2) I don’t understand, where do I change parameters to make my video bigger on cellphones?

3) No. In the whole website, all my feature box are not responsive. On cellphones, they are huge and we see half of them …

4) Page ”technologie”, section ”Avant-après” : How do I make the slider responsive? It’s very small on cellphones…

5) Page ”contact” : How do I make a responsive background? I want to see a bit more the map on cellphones…

CSS GRADIENT QUESTION
6) Page ”technologie”, section ”Avant-après” : I want to replace the background image by a css code.
For another page I wrote the following code.

.page-id-157 #x-section-2 {
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#611f5f+0,b75193+100 */
background: #611f5f; /* Old browsers */
background: -moz-linear-gradient(top, #611f5f 0%, #b75193 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #611f5f 0%,#b75193 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #611f5f 0%,#b75193 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#611f5f’, endColorstr=’#b75193′,GradientType=0 ); /* IE6-9 */
}

I don’t see the id of this page + is it section 5?

Cheers and tks

[elise83Participant]

5) Forget the question for this page, I created another section.
Nonetheless, I’m still interested in knowing the css or class to decrease the size of a background section!
Tks

[RadModerator]

Hi there,

2. Bigger in terms of height? The video player is responsive. And will only respond to its container, setting static size is against that setup. Video can’t be larger than its device, or larger that its aspect ratio. Would you mind providing a screenshot of your expected sizing? Maybe I can provide some CSS as a workaround.

3. In that case, please provide that has unresponsive feature box. Maybe we have different definition of responsiveness 🙂

4. It’s responsive, but again, it only respond to its container. Hence, it’s the container that isn’t responsive. That’s because you added this,

max-width: 50%; margin: 0 auto;

Please note that adding any limiting dimension will always affect responsiveness. If you wish to implement it without affecting other devices, then do it with class base styling.

For example, you can add this CSS to Admin > Appearance > Customizer > Custom > CSS (the inline styling should be removed first)

@media ( min-width: 980px ) {
.slider_limit {
max-width: 50%;
margin: 0 auto;
}
}

Then simply add slider_limit to your slider’s Class input/option.

5. The background is always responsive, but unlike a normal image that only respond to container’s width. Background respond to both container and its content. I’m not really sure what is not being responsive. Maybe some details would help.

6. You may change that CSS to this,

.home #x-section-5,
.page-id-157 #x-section-2 {
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#611f5f+0,b75193+100 */
background: #611f5f; /* Old browsers */
background: -moz-linear-gradient(top, #611f5f 0%, #b75193 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #611f5f 0%,#b75193 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #611f5f 0%,#b75193 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#611f5f’, endColorstr=’#b75193′,GradientType=0 ); /* IE6-9 */
}

Hope this helps.

[elise83Participant]

Hi,

A] Ok I got your point. So I need to create media queries instead of CSS within style box to be fully responsive.right?!

So for example, page ”comparaison” section ”3 traitements”, I created 3 rows for desktop and 3 rows for cellphone. but it’s really heavy 🙁
If I want my image size changes regarding screen size, I would need 3 media queries ? kind of something as the following

@media ( min-width: 768px ) {
.image {
max-width: 50%;
margin: 0 auto;
}
}

@media ( 481px – 767px) {
.image {
max-width: 70%;
margin: 0 auto;
}
}

@media ( 480px & Smaller??) {
.image {
max-width: 100%;
margin: 0 auto;
}
}

I’m not a developer as you can see!!!!

B] Question 6 : it doesn’t work. I entered the code within the customizer and I removed the background…

C] What would be the 3 media queries (desktop, tablet, cell) for my feature box page ”certification”, section 2? I want to keep the feature box (row 3) and not the image (row 4) as there is an effect..

Cheers and thanks! Love this support!

[elise83Participant]

Question 6: here is what it does…

[RadModerator]

Hi there,

A. Yes, correct to explain it further min-width means equal or greater, while max-width is equal or lower. The correct is this

@media ( min-width: 980px ) { /* larger than tablet (desktop) */
.image {
max-width: 50%;
margin: 0 auto;
}
}

@media ( min-width: 768px ) { /* larger than mobile (tablet and desktop) */
.image {
max-width: 50%;
margin: 0 auto;
}
}

@media ( max-width: 767px ) { /* mobile */
.image {
max-width: 70%;
margin: 0 auto;
}
}

@media (  max-width: 480px ) { /* much smaller mobile */
.image {
max-width: 100%;
margin: 0 auto;
}
}

B. I don’t see the CSS there, looks like it’s not added. Please add it again, and please remove this

<a href="tel:+212 6 61 880 824">Call Me</a>

You shouldn’t add HTML content to CSS.

C. As explained at A# 🙂

Hope this helps.

[elise83Participant]

Hi again,

A] I entered the 4 Jquery above but on desktop the image is huge (graphs page ”avantage”). I tried to reduce the percentage by 20 and 30% for desktop but it doesn’t work . What should I do?. I want the graphs to be smaller for desktop…
On mobile all good 😉

B] Look now. I added an image background instead of 0 background, the time to solve the problem….

C] How does it work when I want the image media query to be applied to certain images and not all? Do I need to create class?

D] Do you have a page where you sum up basic Jqueries?

Thanks and cheers!

[Rue NelModerator]

Hello There,

A] You are using one column row. You can make the image smaller by adding an inline css max-width: 800px; or smaller to the image element so that you can display the graph a little bit smaller.

B] Please insert a custom my-image class for your image element. You can then use this class to target the certain image in creating your custom css.

.my-image {
  // your style here
}

D] Media queries you mean? Regretfully we do not have a page like that.

Hope this helps.

[Author]

Posts