Thanks for the try. This does not make a difference. Ant other idea to why it won’t accept my custom code on mobile?

Example:

My custom code that works everywhere above 479 pixels:

.av-inner-tab-title {
font-family: baskerville-urw, serif;
font-size: 0.9em;
line-height: 1.5em;
font-weight: 300;
font-style: italic;
text-transform: none;
display: block;
margin-top: 7px;
margin-bottom: 0px;
margin-left: 0px;
background-color: transparent;
}

The CSS that seems to overide below 479 pixels:

.av-inner-tab-title {
text-transform: uppercase;
display: block;
line-height: 1.2em;
margin-top: 7px;
margin-bottom: 3px;
font-size: 13px;
text-align: center;
}

Great job! that worked. Last questions is if I can add a “GET STARTED” button in the top area with the Search icon, burger menu and logo. I know it is a lot, but if anyone can do it, you can. See example here: https://drive.google.com/file/d/17voyrfwvrnK9Upa0AHw3oaEdEQdkNgNX/view?usp=sharing

• This reply was modified 2 years, 2 months ago by bemodesign.

That worked but the background image only shows up on desktop and not Mobile view. Any ideas or code for this? I kept the same title so you can see where it is: title: “A growing library of more than 2 dozen demos”

hey Ismael

great thank you that works on desktop, but for some reason now on mobile there is a black outline around the social icons?

Just on the size of the social icons – I’m not sure which of these settings I need to adjust to make the size of the social icons larger? I’ve tried a few combos and it just moves the position of them not make them any bigger?

#top #header_meta .social_bookmarks li a {
float: left;
width: 30px;
line-height: 30px;
display: block;
margin: 0px;
outline: none;
padding: 0;
min-height: 30px;
height: 100%;
overflow: visible;
z-index: 2;
position: relative;
text-align: center;
}

Cheers
Natasha

Sure.. this topic can be closed!

THX

F

Hello Mike,

thanks for your reply.
I don’t want scroll snapping in this case. I use anchortags on a page which scroll to an id on the page (like: text). Because of the sticky header, the header overlaps the content it scrolls to.
One line of css (scroll-margin-top) could be enough to solve this problem, but I think something in the theme prevents it.
You can see an article how it works here. I use it more often on other websites but can’t get it to work in enfold.

Regards,

Kees

Hey Rikard. No, unfortunately I have not found a solution. in the mobile menu, I want the top level menu items to be the same size as the sublevel menü items. Please send the css for this.

thanks you

Hi again Ismael,

Disabled maintenance mode now.

Basically, I just want the table to look like on tablet and desktop breaks, but on the narrower space of a mobile. Please see the image links provided.

Here’s my tablet custom code (this might reveal my limitations as a coder, that’s why I love your Enfold theme :)

Moved to: https://pastebin.com/H0sJCpLS

Hi Ismael,

Oh sorry, of course :) Disabled maintenance mode now.

Basicly, I just want the tabs to look like tablet and desktop breaks, like the image link provided. It seems to use other code for the mobile break?
How can I adjust mobiel tab look?

This is my custom code:

/*TAB SECTIONS*/
.av-tab-section-container {
background-color: #ffffff;
}
.av-tab-section-tab-title-container {
background-color: #ffffff;
}
.av-inner-tab-title {
font-family: baskerville-urw, serif;
font-size: 0.9em;
line-height: 1.5em;
font-weight: 300;
font-style: italic;
text-transform: none;
display: block;
margin-top: 7px;
margin-bottom: 0px;
margin-left: 0px;
background-color: transparent;
}
.av-active-tab-title .av-inner-tab-title {
position: relative; /* Ensure proper positioning */
}
.av-active-tab-title .av-inner-tab-title::after {
content: “”; /* Empty content for pseudo-element */
position: absolute; /* Position the line */
left: 0; /* Align with the text */
right: 0; /* Align with the text */
bottom: -3px; /* Adjust the space between text and line */
border-bottom: 1.5px solid; /* Create the line */
}
/*Remove greyscale from inactive tabs*/
.av-tab-section-image {
filter: opacity(100%) !important;
}
/*Increase tab spacing*/
#top .av-section-tab-title {
padding-right:7px!important;
padding-left:7px!important;
}

***UPDATE*** Turns out this didn’t work . . . not sure why it seemed to.
Woah. I figured out the overlay issue. Added this
#top .avia-slideshow .image-overlay {
display: none !important;
}
.slide-entry a .overlay-type-extern.image-overlay {
display: none !important;
}
after the other button css.

HUGE development for me to figure that out . . . now to get the rollover color shift on the button.
J

Eventually the blog stopped displaying as a home page but the styling was too wonky. I ended up making some changes and pushing the staging site again.

Unfortunately, I lost all my work changing the H1, H2, H3… tags on each page as well as my AIOSEO work. Thankfully I had the SEO info documented elsewhere and the tags I can manually go and change. I wonder if there is a way moving forward to recuperate that work or if I will have to go back and update manually?

And how do I update moving forward without breaking this site again? Apart from the obvious (backing up right before any updates – learned the hard way!)

Ok, that looks better now on Desktop. On mobile however it is still a mess. The dates show double, there should not be a border around it, the dates should display in one line. Can you please also send the css handler for that?

Also – how can I address the font color in the right column.

Thank you.

Nope :(
The pictures in the fourth an the sixth section are still visble on ipad portrait mode. They are unvisible on mobile (that’s good!) an visble on desktop and on ipad landscape (also good!)