CSS help

This topic has 23 replies, 2 voices, and was last updated 6 years, 9 months ago by luismarioochoa.

Viewing 20 posts - 1 through 20 (of 24 total)

1 2 →

Author

Posts
February 26, 2018 at 12:47 am #132365

luismarioochoa
Participant

Hello,

I need some assistance with CSS, for some reason the ones I am using are not working.

http://bloomrestaurant.com/

I need to:

1. Expand the Slider size (right/left) to match the navigation menu width
2. Move Slider up to be right under the navigation menu, (no space between them)
3. Rid Slider of navigation arrows, for some reason this is not working: #slider-nav { display: none; }
4. Rid the gray dividing line below the slider
5. Sticky Menu. I tried this and dd not work: #header-menu-sticky-wrapper { margin: 0 !important; }

Thank you

Luis

February 26, 2018 at 2:05 am #132372
Skandha
Participant
@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code

To expand slider size to match navigation menu width and remove space between them
```
.featured-img {
	width: 110%;
	position: relative;
	left:-47px;
        top:-42px;
}
```
To get rid of slider arrows
```
.nav-previous .pngfix {
	display:none;
}
.nav-next .pngfix {
	display:none;
}
```
To get rid of grey line below the slider
```
#slider {
	border:0;
	margin:0;
}
```
You seem to be using very old version of the theme. Please update the theme to the latest version to make the best use of it.

Let me know if you have anymore issues!

Regards,
Skandha
February 26, 2018 at 3:15 pm #132412

luismarioochoa
Participant

Dear Skandha

Thank you for this information, Almost worked perfect, unfortunately the Slider is off position with regards to the navigation menu when seen in mobile. Can you advice how to correct that? Thank you so much in advance.

Luis

February 27, 2018 at 4:33 am #132447
Skandha
Participant
@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

Please replace the CSS code i provided you above by the following CSS Code
```
#main.clearfix {
	padding:0;
}
.featured-img span {
	padding:0 !important;
}
.nav-previous .pngfix {
	display:none;
}
.nav-next .pngfix {
	display:none;
}
#slider {
	border:0;
}
```
Let me know if this solves your issue.

Regards,
Skandha
February 27, 2018 at 9:15 am #132458

luismarioochoa
Participant

Dear Skandha,

It worked well. Thank you.

1. How could the top padding of the heather image be set to 0, or to eliminate the space at its top?

2. I also would like to diminish the space below the Slider and the body of the site.

Thank you

Luis

February 27, 2018 at 10:00 am #132465
Skandha
Participant
@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#access {
	margin: 0 !important;
}
#slider {
	margin-bottom:5px;
}
```
Let me know if this solves your issue!

Regards,
Skandha
February 27, 2018 at 11:12 am #132476

luismarioochoa
Participant

Hi Skandha,

The space between the Slider and Widget is now good, however the left side (body) I would like to bring it up to be at the same high as the widget on the right. Is that possible?

Also the top margin of the heather did not change, there is still the same space that I would like to eliminate. Please advice.

Thank you so much in advance

Luis

February 28, 2018 at 12:51 am #132510
Skandha
Participant
@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#content article {
	padding-top:0;
}
.entry-content img {
	margin-top:0;
}
```
Let me know if this solves your issue!

Regards,
Skandha
February 28, 2018 at 12:59 am #132511

luismarioochoa
Participant

Hi Skandha,

Much better, but still the Widget padding is higher than the content. Is there a way Widget and Content top margin could match?

Thank you so much,

Luis

February 28, 2018 at 1:08 am #132512
Skandha
Participant
@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
.widget-area {
    margin-top:14px;
}
```
Let me know if this solves your issue!

Regards,
Skandha
February 28, 2018 at 1:17 am #132513

luismarioochoa
Participant

Very nice Skandha,

Two more things:

1. Header image top margin still shows big white space above, I’d like eliminate that gab.

2. Content, I’d like to pad it to the left to match left margin of the slider.

February 28, 2018 at 1:25 am #132514
Skandha
Participant
@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#page {
	margin-top:0;
}
#content article {
	padding-left:0;
}
```
Let me know if this solves your issue!

Regards,
Skandha
February 28, 2018 at 1:33 am #132515

luismarioochoa
Participant

Sorry Skandha, these codes seemed to work on the preview page of the additional CSS, but when published they do not work.

February 28, 2018 at 2:01 am #132517

Skandha
Participant

@luismarioochoa: Try refreshing the customizer and then add additional css and check if works out. If it doesn’t, update the theme and wordpress to the latest version and let me know if the issue persists.

Regards,
Skandha

February 28, 2018 at 2:10 am #132518

luismarioochoa
Participant

Thank you Skandha, refreshing did it! Purchasing tomorrow!

February 28, 2018 at 2:15 am #132519

Skandha
Participant

@luismarioochoa: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/catch-box/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help,
don’t hesitate to let me know.

Regards,
Skandha

February 28, 2018 at 12:18 pm #132563

luismarioochoa
Participant

Hi there Skandha,

I just left you an only 5 star review because there were no more starts. You have been amazing.

I do still have a 3 more questions before I update the theme.

1. Bullets Navigation are still showing in mobile version under the Slider. I would not mind them if they were actually inside the Slider in the bottom instead of the way it shows now.

2. I have a couple of Social Media Widgets installed (Twitter and Face Book) that show very well on mobile, but they just don’t open or occasionally do on desk tops or tablets) How can I correct this?

3. I see that the Slider give the option to enter Title and Content, but they do not show as in the Everest Theme. Is this because my Catch Box is too old or because it is the way it is supposed to be (rather ugly).

Thank you so much in advance.

Luis

February 28, 2018 at 11:06 pm #132579

luismarioochoa
Participant

Also, I installed MyStickyMenu plug in and it is working OK with the exception that the navigation bar is padding hard left. Please advice how to correct it. Thank you

Luis

March 2, 2018 at 3:42 am #132635
Skandha
Participant
@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

To remove bullets from sliders
```
#controllers {
    display:none;
}
```
The Social Media Widget facebook and twitter looks totally good at my end.

The Slider option to enter text and content seems to work well at my end. Please update your theme and let me know if the issue persists.

To bring the sticky menu to the center
```
#mysticky-nav.wrapfixed {
    left:unset;
}
```
Let me know if this solves your issue.

Regards,
Skandha
March 2, 2018 at 8:52 am #132655

luismarioochoa
Participant

Thank you Skandha,

I changed the Widget title background color to green, but still the very top shows orange. Is there a way I could make background title fully green?
Author

Posts