Adaptive header problem on portable devices

Posted in: Newspaper
Post count: 297

The problem is that the menu is not automatically cropped on portable PCs, it shows better in the video.
video failure

Post count: 35449

Hi,
I understand, a solution that I think would also improve the performance of the speed on the site is to disable the sticky header and activate the option on the row to make a row sticky – https://i.imgur.com/sm7b5cb.png this way the consistency of the appearance in the menu will be kept all the time.
Thank you!

Post count: 297

Thanks, it’s an option. I need help with the css, it turns out that in the Theme panel custom code section I have some modifications to h3 and h4 but this affects other plugins that use the same global configuration.

CODE:
/* tip letra/color encabezado articulo h3 y h4 */

.td-post-content h3 {
position: relative;
display: inline-block;
font-family: "Raleway-Regular";
font-size: 24px;
color: #fff;
/*background-image: linear-gradient(to right, #0076db, rgba(107,167,219,0.60));*/
background: #0076db;
padding: 8.5px 10px 8.5px 10px;
/* border: 0px solid #eef6fb;*/
transform: translateY(-50%);
box-shadow: -5px 5px 2px rgba(0,0,0,0.25);
margin: 35px 0 20px 0;

}

.td-post-content h3:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: -2px;
right: -2px;
border: 4px solid #eef6fb;
z-index: -1;

}

.td-post-content h4 {
position: relative;
display: inline-block;
font-family: "Raleway", sans-serif;
font-size: 20px;
color: #0076db;
background: #fff;
padding: 5px 10px;
border-left: 2px solid #0076db;
border-bottom: 2px solid #0076db;
margin: 0 0 20px 0; /* Agregamos 20px de margen inferior */
box-shadow: -3px 3px 2px rgba(0,0,0,0.25);
}

I have tried to create a new rule or class and it has not worked, the new class would be for the posts and leave the global parameters that are fed by other plugins.subtitle h3
page reference
Image wp recipe marke
page reference

Post count: 35449

Hi ludyma,
The code .td-post-content is used for the post content therefore all H3 and H4 from the post content will use that css. Now if you have a specific class on those H3 and H4 elements that you want to use the above code, please let me know that class and I will try to adjust the code.
Thank you!

Post count: 297

Thank you, well, how can I tell you if I want to know how I can generate an h3 and h4 class that is not the global one, because that affects other plugins. I will appreciate if you guide me how I can do it, I will use the previous code that I showed you for the new class.

Post count: 35449

Hi,
I see that right now the code from H3 has a class and and ID – https://i.imgur.com/Rky0HWM.png maybe you can use the class or the ID (the id is unique), the class is global.
Thank you!

Post count: 297

The problem is that the ::before rule is being applied to the entire margin of the post and not just to the h3 class as it normally does, as shown in the screenshot.

The problem is the (.td-post-content h3:before) part of the css:
.td-post-content h3:before {
content: '';
screen lock;
position: absolute;
width: 100%;
height: 100%;
top: -2px;
right: -2px;
border: 4px solid #eef6fb;
z-index: -1;

}`
I have disabled the (.td-post-content h3) for the id sub-03, it works but the problem is when the post appears, a strip is marked that it shouldn’t, it should only affect the id sub-03 .
This is the identification code sub-03:
#sub-03 {

relative position;
display: online block;
font-family: "Raleway-Regular";
font size: 24px;
color: #fff;
/* background-image: linear-gradient(right, #0076db, rgba(107,167,219,0.60));*/
background: #0076db;
padding: 8.5px 10px 8.5px 10px;
/* border: 0px solid #eef6fb;*/
transform: translateY(-50%);
box shadow: -5px 5px 2px rgba(0,0,0,0.25);
margin: 35px 0 20px 0;

}

Help me to have the correct css code so that it applies the ::before to the H3 class but what I show you does not happen.
capture

  • This reply was modified 3 years by ludyma.
Post count: 35449

Hi,
Can you please provide a link where I can investigate the code when is applied?
Thank you!

Post count: 297

Hello, send an email to give you access to the trial version and see if you can check its effect.

Post count: 297

Hi Cali,
I already solved the problem with an own class that does not affect the pos or the global.

Thank you very much for your help.

Post count: 35449

Hi,
I’m glad to hear these good news!
Have a nice weekend!

Viewing 11 posts - 1 through 11 (of 11 total)
The forum ‘Newspaper’ is closed to new topics and replies.