Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Full width and spacing questions for newedge Joomla template

Featured Lock Resolved Task
Hi there, we have the newedge template installed on our live site.

We are using the default theme, and we have customized it.

We are now creating a new front page (not visible yet) through SP Page Builder.

Our temp page is found in Sp page builder is: http://shorturl.at/dhCR2

See the following screen for what I am referring to: https://snipboard.io/VF1fAN.jpg

We have a few support questions.


1.
ROW 1, Slider and images.
A) We need full width of the page.
B) We need NO spacing in between slider and images on right.
C) We need NO spacing below slider and images where it meets the VIDEOS section.

Can you share with me the code to make this happen? For we dont want to affect
the live front page.

* Here is a screenshot of before: https://snipboard.io/2gbtMz.jpg

* Here is a screenshot of what we want it to look like: https://snipboard.io/TugGCB.jpg


2.
ROW 2, videos.
A) We need full width of the screen of this row.
B) We need NO spacing in between, or top or bottom and after each video.

Can you share with me the code to make this happen? For we dont want to affect
the live front page.

* Here is a screenshot of before: https://snipboard.io/qRfmd5.jpg

* Here is a screenshot of what we want it to look like: https://snipboard.io/f3E7mT.jpg


3.
Row 3, countdown feature.

We need that in full width of page, no spacing on the left.

Can you share with me the code to make this happen? For we dont want to affect
the live front page.

* Here is a screenshot of before: https://snipboard.io/KYU4sZ.jpg

* Here is a screenshot of what we want it to look like: https://snipboard.io/Vt7rEy.jpg


4.
Row 4, Instagram feature.

A) We need full width of page
B) We need NO spacing for top, left, right, bottom.

Can you share with me the code to make this happen? For we dont want to affect
the live front page.

* Here is a screenshot of before: https://snipboard.io/AO9Dox.jpg

* Here is a screenshot of what we want it to look like: https://snipboard.io/IPJHhR.jpg


5.
Row 6, meet the drivers.

A) We need full width of page
B) We need NO spacing for top, left, right, bottom.

Can you share with me the code to make this happen? For we dont want to affect
the live front page.

* Here is a screenshot of before: https://snipboard.io/CDvF7i.jpg

* Here is a screenshot of what we want it to look like: https://snipboard.io/Zle5kB.jpg


6.
Please let me send you login details to the admin section via email. Please tell me how to do this.

PLEASE NOTE: FULL WIDTH OF SCREEN NOT TO BE APPLIED TO HEADER MENUS AND FOOTER SECTION.

36 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
A) You can set full with from Row Options > Fluid Row > Yes

B) To remove space between inside:
Row Options > Remove Gutter > Yes
then to remove space top/bottom:
Row Options > Style (tab) > Padding: 0px 0px 0px 0px


you have to do this for all Rows where you need these settings.


row_A.jpg

Attachments (1)

  • row_A.jpg
    row_A.jpg 44 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Extra tip
B) In some cases, padding you have to reduce also from addon settings

Jason Shico

More than a month ago #Permalink
Hi Paul, thanks so much for your excellent support and advice, most worked perfectly. You guys rock!

However, having a slight issue, well with the screen I am on, here are some of the new issues I face as a result of your excellent advice:

1.
On the top row, to the right of the slider feature, the 2 images, one is larger
than the other, for example:

https://snipboard.io/FXlrgu.jpg

I am hoping to make these pics both even so you can see both images before you scroll down.

For example, this is what I would love to see:

https://snipboard.io/gKQvDj.jpg


2.
Slider feautre, as a result of the first issue above with the right images, the slider now doesnt fit completly and has much empty white space as soon as you start to scroll down.

I assume when we address point 1 above, the white space will auto fill in?

For example, see the following screenshot with what I am referring to:

https://snipboard.io/qZ2Gtk.jpg


3.
Instagram issue, now that we changed the row fluid etc for the instagram section,
there is still spacing in between and above and top, even though we set it to 0px 0px etc.

For example, see the following screenshot:

https://snipboard.io/kTKNjG.jpg

Any ideas how to get rid of that spacing in between each post and top and bottom?


4.
Towards the end of the page, the MEET THE DRIVERS section, we are still getting spacing inbetween, for example, see the following screenshot:

https://snipboard.io/t9Cr2J.jpg

Any ideas how to remove that space inbetween each of these posts / pics?


5.
When you mention "Extra tip
B) In some cases, padding you have to reduce also from addon settings" can you share a screenshot of where I need to go to see this?


I look forward to hearing from you.

Thanks so much for your excellent support.

Paul Frankowski - Staff

More than a month ago #Permalink
ad 1) Both images should have this same resolution to be equal (black and red car).
To fit two images, you have to use simple math.
768px : 2 = ___px their max height.

Paul Frankowski - Staff

More than a month ago #Permalink
for 3 & 4 use custom CSS, how to use it - read in Helix documentation
------------
ad 2) Yes, it's grid struture. If you ever play with puzzle or tetris game you should know.
---
ad 3) Instagram -- it's no issued, it's default style from SPPB, solution

.layout-classic .sppb-instagram-image {padding: 0;}


------------
ad 4) MEET THE DRIVERS

.latest-post.sppb-col-sm-3.intro_item {padding: 0;}

---------------------
ad 5) In Addon options in Style Tab, there is default margin, easy to find 0-0
margin.jpg

Attachments (1)

  • margin.jpg
    margin.jpg 46.2 KB

Jason Shico

More than a month ago #Permalink
ad 1) Both images should have this same resolution to be equal (black and red car).
To fit two images, you have to use simple math.
768px : 2 = ___px their max height.


Hi thanks so much Paul for your excellent support.

I am not sure I understand what you mean.

The images are the same height.

Do you want me to reduce the height of both of these images?

Can you please give me more information thanks.

Paul Frankowski - Staff

More than a month ago #Permalink
yes, now both of them have 768px of height, to fit there they shouldn't have more than 384px

Jason Shico

More than a month ago #Permalink
Hi Paul, thanks so much, however, I reduced the size of both the images on the right of the slider.

And what you suggested did not work.

As you will see on this screenshot: https://snipboard.io/FQa4DO.jpg

The images now have spacing from left and right, and the slider does not fill that empty white space as I said in my last post.

Please help, may I give you access to the backend to check it out?

I look forward to your urgent reply.

Thanks

Paul Frankowski - Staff

More than a month ago #Permalink
try with wider images, they should be more panoramic
height is also too big... you have to check using different images (And resolutions), I know it's not easy, but nobody said it would be..

Jason Shico

More than a month ago #Permalink
thanks so much for your excellent support.

ok I will keep trying with different size images and focus on wider images.

But you say the height is to big, I reduced the height as per your previous post to at least 320px, does that mean I have to go smaller than 320px height?

Paul Frankowski - Staff

More than a month ago #Permalink
I'm sorry but you have to check it out by trial and error method.

Jason Shico

More than a month ago #Permalink
Hi Paul, trust you are well. Thanks for excellent support.

After doing your changes, we are noticing that there are issues viewed from different screen sizes, for example, see the following screenshot:

https://snipboard.io/G7zQK8.jpg

You will notice, the one of the left is 15 inch and looks good, but the middle and right ones are not filling in the blank spaces. Especially the slider feature.

Is there anything you can do to help me where it fills in the blanks vertically? we dont want space below the slider for example.

Please help urgently.

Thanks,
Jason

Paul Frankowski - Staff

More than a month ago #Permalink
Yes, it was easy to predict.
Two options:
1) Using custom CSS to crop/resize images (or at least set them max-height) on selected screen resolutions.
OR
2) Those two images on the right side should use images as image background so you will be able to use background-size: cover for them and also control size.

Jason Shico

More than a month ago #Permalink
Hi Paul, thanks so much for getting back to me.

Can you tell me the custom css code for your point 1, and can you please give me exact steps on how to do your step 2 please?

Thanks so much.

Jason Shico

More than a month ago #Permalink
Hi Paul, trust you are well. Hoping to get a urgent response regarding my last comment, it would be very much appreciated. Thanks

Jason Shico

More than a month ago #Permalink
Hi Paul, trust your doing well. Sorry to keep posting comments, any chance you can help me with my questions please? it would be very much appreciated.
Hi Paul, trust you had a nice Christmas break. Not sure if you are back onboard. Hoping you are. Any chance you can please help me with my last comments please?

Paul Frankowski - Staff

3 weeks ago #Permalink
yes, thanks. I had a few days off.
I will play on my demo site first.
yes, thanks. I had a few days off.
I will play on my demo site first.


No problems Paul, thank you. I look forward to your next update. Thanks

Paul Frankowski - Staff

2 weeks ago #Permalink
unfortunately, but the only reasonable way would be to add extra CSS correction for each resolution range,
for example, if right now you designed to look good on 1920px
you need CSS fix for 1680, 1440, 1280px
unfortunately, but the only reasonable way would be to add extra CSS correction for each resolution range,
for example, if right now you designed to look good on 1920px
you need CSS fix for 1680, 1440, 1280px


Thanks for getting back to me Paul.

Can you please advise the custom CSS please?

And more information on what I need to do with the image sizes?

And secondly, need instructions on your last comment:

"2) Those two images on the right side should use images as image background so you will be able to use background-size: cover for them and also control size."

I look forward to your reply.

Thanks

Paul Frankowski - Staff

One week ago #Permalink
Should be much better now on those resolutions
1024, 1280, 1440, 1680, 1920px

(sorry or delay)
Should be much better now on those resolutions
1024, 1280, 1440, 1680, 1920px

(sorry or delay)


Thanks so much Paul, very much appreciated.

One question though, the images on the right of the slider. You advised to "Those two images on the right side should use images as image background so you will be able to use background-size: cover for them and also control size."

However, I tried to do what you advised with the image on the right, and set it as a background image, as per this screenshot:

https://snipboard.io/c8VZdg.jpg

However, when I change it to a background image, as you will see on the right of the screenshot, the image does not display at all.

I have put it back to normal, the image in the general tab and not the style tab if your wondering why it works now. But please help urgently with this one.

I look forward to your reply.

Paul Frankowski - Staff

One week ago #Permalink
Maybe it's sort of bug, to be honest, I've never used image bg in image addon before.
---

About the main problem with image size, it's not our software issue,
for the browser, those are two separate columns with 2(3) different content.

Paul Frankowski - Staff

One week ago #Permalink
Image addon - I tested on my private site, and both images are displayed.

foto_3243_2020.jpg

For your project:
I have idea, to use the first image as a transparent box with link, and bg image as real image.

Attachments (1)

  • foto_3243_2020.jpg
    foto_3243_2020.jpg 21.9 KB

Paul Frankowski - Staff

One week ago #Permalink
I made a test drive. On your site this method is working perfectly as well.
Maybe I did not invent the wheel, but the second idea (wth BG) seems to be the most reasonable, and the image is still clickable.
foto_3246_2020.jpg
general.jpg
style.jpg

Attachments (3)

  • foto_3246_2020.jpg
    foto_3246_2020.jpg 161.1 KB
  • general.jpg
    general.jpg 56.3 KB
  • style.jpg
    style.jpg 84.3 KB
Thank you for your excellent support Paul, that all worked perfectly. Much appreciated.

On a final note, I am having troubles with the logo top left.

We changed the CSS code on template.css on line 1254 for the logo, we changed the max-width: auto; it was originally max-width: 100%;

As a result the logo is larger, and exactly how we want it, but it screws with the template and the mobile version of it, for example see the following screen what it looks like a on a mobile iphone 6s plus: https://snipboard.io/6MU5Nn.jpg

Any thoughts on just making our logo larger like it is now without doing what I did to the CSS? We never really got this right from the start, we have tried many different sized logos.

I look forward to your urgent reply.

Thanks,
Jason

Pavel

One week ago #Permalink
Hi. Let me insert my five cents.:)
1) max-width: auto; - is not the right code. Such values at this property can not be. Return it back to 100%.
1.jpg
2)Never edit system and template files. To override css use custom.css file.
3) For the selection of the desired size of the logo on mobile devices, play around with the settings the size of columns in the Header section (in the Layout Builder). Remember, the total size of all the columns should not exceed the number of 12.
4) If, after step 3, you will not be able to achieve the desired size, then this can be achieved using css. But a completely different way, different from what you were trying to do by editing the line in 1254.
5) Many questions for you will become clear if you look at Helix Ultimate documentation carefully.

Attachments (1)

  • 1.jpg
    1.jpg 216.6 KB
Hi. Let me insert my five cents.:)
1) max-width: auto; - is not the right code. Such values at this property can not be. Return it back to 100%.
[attachment]1.jpg[/attachment]
2)Never edit system and template files. To override css use custom.css file.
3) For the selection of the desired size of the logo on mobile devices, play around with the settings the size of columns in the Header section (in the Layout Builder). Remember, the total size of all the columns should not exceed the number of 12.
4) If, after step 3, you will not be able to achieve the desired size, then this can be achieved using css. But a completely different way, different from what you were trying to do by editing the line in 1254.
5) Many questions for you will become clear if you look at Helix Ultimate documentation carefully.


Hi Paul, thanks so much for your excellent support and reply. All noted.

I have just changed the template.css back to its original code and will always use custom.css from this point on.

Regarding your reply on step 4, can you share some CSS to get my desired size for the logo please? It would be very much appreciated.

Pavel

One week ago #Permalink
Regarding your reply on step 4, can you share some CSS to get my desired size for the logo please? It would be very much appreciated.

To do this, tell me what size you need.
(Now I am on the way to my office. I'll be back to you after a while.)
Regarding your reply on step 4, can you share some CSS to get my desired size for the logo please? It would be very much appreciated.

To do this, tell me what size you need.
(Now I am on the way to my office. I'll be back to you after a while.)


Hi Paul, thanks so much for your quick reply. Much appreciated as always.

500 x 150 would be ideal for the logo.

Thanks,
Jason

Pavel

One week ago #Permalink
500 x 150 would be ideal for the logo.

It looks like you do not quite understand how it works.
If you make the size of the logo as you want, it will look as follows on the iphone:

1.jpg

I do not think you want it so.

Image varies proportionally depending on the width of the screen and depending on width of its wrapper . Your Header is divided into two columns, which are a wrappers for the logo and menu. Now you have division 4 + 8. 4 for the logo, and 8 for the menu.

3.jpg

From the size of the columns depends the objects size , placed inside columns. On mobile devices, you do not need a wide column for the menu. Therefore, you can increase the column for the logo that will make it bigger. In your case it would be a good size 10 + 2 columns for mobile devices

2.jpg

Therefore the first thing you need to start - to read the documentation Helix, and play around with the settings grid system for different screens. And just in case you can not adjust the size of the logo on any screen size, as you like, it can be corrected by using css.

Attachments (3)

  • 1.jpg
    1.jpg 381.7 KB
  • 3.jpg
    3.jpg 322 KB
  • 2.jpg
    2.jpg 246.9 KB
Thanks so much for your excellent support Paul regarding the logo, I will get back to you shortly if I have any further questions regarding the logo.

On a final note, regarding the 2 images on the right next to the slider, as per this screenshot:

https://snipboard.io/QIpRMJ.jpg

Its a screenshot of 3 different screens, the last one, you will notice the 2 images are not fully visible.

Any ideas how to fix that?

Look forward to your reply.

Thanks,
Jason

Pavel

4 days ago #Permalink
Hi. Use an image instead of background image.
And please provide a link to the page that it would not have to rewrite from the screenshots.

For clarity - I am not a member of the support team. Just a user, like you. :)

Paul Frankowski - Staff

4 days ago #Permalink
Use an image instead of a background image.

If he would images, as we did in the past, he would lose flexibility, where image always fill the whole area.
I think better would be to set background-position to start from the bottom, not center-center like it's now (as I remember). So red label should be always visible.

Jason
check settings of those two Image addon, Style tab, where the image was, and set background to bottom-left or bottom-center
Use an image instead of a background image.

If he would images, as we did in the past, he would lose flexibility, where image always fill the whole area.
I think better would be to set background-position to start from the bottom, not center-center like it's now (as I remember). So red label should be always visible.

Jason
check settings of those two Image addon, Style tab, where the image was, and set background to bottom-left or bottom-center


Thanks so much Paul. Worked perfectly on my screens, waiting on feedback from other devices and screens.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 121
Toufiq

Toufiq

Total Accepted Answers: 74
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 27
Ofi Khan

Ofi Khan

Total Accepted Answers: 15
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 10

120

Templates

311214

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us