Adding areas like integrity 7

Support
#1

Hi there, How do you get the look of different layers I want my page to look like this http://demo.theme.co/integrity-7/
With the separate areas with information. At the moment my page looks so basic with text areas etc and I cant figure out how to have each section a different picture or background to break it up and look more professional… This is my page www.honestlynatural.com.au but cant figure out how to have nice looking areas etc…

Thanks

#2

Hello Nonie,

Thanks for asking. :slight_smile:

You can add background color or image to the section in order to give unique look to the sections. For more information, I would highly recommend you to take a look at following tutorial and give special focus on V2 Sections, Rows and Columns topic:

Thanks.

#3

Thanks I didn’t really understand some of that…
so I made an area which I would like full width but I cant seem to get it to full with even when turning off inner container… See picture:
I would like the colour background to go the full width but other content above and below to stay the same. If I know how to do this I can have sections full width and some not.

Also is there a way to have an image as a background in a container/section with text over it instead of just a background colour?

Thanks

#4

Hey Nonie,

I see you’re using the default page template. Use the Blank No Container | Header Footer page template.

Hope that helps.

#5

Ive changed it to blank No container | header, footer. but the section still isn’t full width…

Also when I create a new container it is very thin, not like in the link I showed you with integrity 7, the images on that page are very thick, I am trying to get an effect like this on my page with some sections having backgrounds with images, others with just colour and all with text or elements over top. Do I need a certain size to upload the images? Why wont it all go full width? MY revolution sliders are full width but not any content or sections

#6

Hey Nonie,

You’re using the Blank Container and not Blank No Container. We could see that in the body class.

If you see the No Container being setup in your back-end or Page Attributes though, this could be a caching issue. If you’re not using a caching plugin, please contact your web host to clear all caches in your site if they have a built-in caching system.

After all that and the issue still persists, please give us WordPress Admin access in a Secure Note.

Thanks.

#7

Thank you, its working great now on Desktop with images and backgrounds but on mobile it isnt full width, how do I make sure its the same on mobile aswell?

Also how do I get each section on desktop to be right ontop of each other without a gap you will see there is a white gap between sections on my homepage, only for desktop not mobile.

Lastly I have added a code for a button in the promo element how do I link the button to another page?

#8

The mobile issue is because of your custom CSS. Please remove it.

The white gap is because of the default section padding. You can set the top and bottom padding to 0 or apply the background to the section instead of the row.

It works in mobile because you also have a custom CSS setting all section padding to 0 on mobile.

For the button, insert the URL in the href attribute of the shortcode. Please see the full usage demo of the Buttons shortcode at http://demo.theme.co/integrity-1/shortcodes/buttons/

Thanks.

#9

Thanks, I changed the paddings to 0 so now there is no white gap. However I cant locate that custom CSS you showed to fix mobile view… There are varieous @media (max width: 489px) with different words underneath but I cant see anthing with padding:> ) 15px;?? Can you tell me perhaps what is above or below to help me locate it?

My button still isnt linking can you please tell me what im doind wrong in the code:

[button type="flat" shape="rounded"href="https://www.honestlynatural.com.au/shop/natures-child-body-wash/"]Shop Now[/button]

#10

Hi Nonie,

There should be a space before href. Please change your code with this.

[button type="flat" shape="rounded" href="https://www.honestlynatural.com.au/shop/natures-child-body-wash/"]Shop Now[/button]

With regards to padding, the code is in your child theme’s style.css

Hope this helps

#11

I removed that line of code but it still isnt full width on mobile…??

#12

Hi,

For it to be full width, you need to remove this code as well.

.cs-content {
    padding: 0 15px;
}

Thanks

#13

beautiful thankyou, very last question regarding the full width…
I have added a new section with a heading and its not going full width on either mobile or dektop no matter what I try, I just cant figure out what is different to all the other sections. On cornerstone it is full width however which is strange… but live its not

#14

Hi,

Please remove the max width you have added to that section.

You can use google chrome developer tools to check.

Hope that helps

#15

The max width for the headline is set on auto and none… Is this a custom CSS i need to remove?

#16

Hi Nonie,

May I know which headline? I checked your provided site and the headline has no max-width and none value. But yes, it could from custom code since max-width is normally for containers. You may find that as well and edit them, but I can’t verify its location as of yet.

Thanks!

#17

Well it was row 5, but this one decided to come good, then row 6 has changed and isn’t full width anymore…

#18

Hi Nonie,

Ah, you probably referring to the max-width of the row where the headline is, and not the headline itself. Please inspect that row and turn off the Inner Container and it should remove the applied max-width.

As for the 6th row/section, it’s already full-width, unless you’re counting the rows based on the section’s count then I’m probably wrong. Would you mind providing a screenshot?

Thanks!

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.