Mobile version

Couldn’t sleep so I got up for a bit and logged in to find out everything is working for you now, which is great to hear ??

…and thank you for your great review and 5-stars ??

Sorry to bother again, it seems that the update changed the full-width I set (I really do not remember how I did it, it was just google, CSS and some luck I guess) and now I do not know how to do the full width again, to the whole website…

You mean you manually changed the size of your webpage or did you do the Boxed size option in the theme? If the latter, go to Appearance > Customize > Site Options

Then select the width of your boxed width of content.

Yes I manually changed the width, I entered some Css code and it made the website full width, and now it s default width, meaning there are some white columns left and right

The option setting in the customizer gives you the “Full Width” option (which is the default setting), so there should not be any left and white spaces showing.

Example with the live demo site: https://demos.shapedpixels.com/opportune/

Yes, I know about that option, but for me it does not work. Full width is selected in Site options but still there are left and right white spaces..

It’s late for me here so doubt I will get your reply before I head off to the land of sleep. But your site is full width. I’m going to guess that you were thinking the “Full Width” option is for the content area?

If so, Full width refers to the complete view-able area in your browser window….the page, not the content portion. The content area is contained within a div container which has a certain width to it and is centered.

Was this what you were referring to?

I’m also going to guess that when you did whatever you did to get whatever to be full width, you modified the parent theme files? Updating the theme would erase any modifications you made…hence why a child theme is used for modifications.

My website is live now, you can have a look. https://lepivoine.ro
Someone adviced me to copy paste this to style.css of my child theme

@media (min-width: 1200px)
.container {
width: 100% !important;
}
@media (min-width: 992px)
.container {
width: 100% !important;
}
@media (min-width: 768px)
.container {
width: 100% !important;
}

I did that but nothing happened

Not sure where you put that code but if you are using a child theme, it needs to be in the child theme’s style.css file. Also, that code is incorrect…you are missing an extra set of curly brackets. Example:

@media (min-width: 1200px) {
   .container {
   width: 100% !important;
   }
}

Also, making all instances of .container be 100% is going to affect “all” of them in the theme. If you just want the content area only, then you can do this:

#content .container {
    width: 100%;
}

Otherwise, do this:

.container {
    width: 100%;
}

Both work as I just did this directly in the browser tools that lets me edit code.

finlly some code that really works! ?? Can you take a look now?
I really wanted no white spaces left and right, what should I do for that?
Sorry for keeping you up late! I promis this is my last questions

You need to apply a negative margin to the .container code then because the Bootstrap code has 25px on the left and right.

.container {
   margin-left: -25px;
   margin-right: -25px;
}

Then you also need this:

.col-lg-12 {
   padding:0;
}

It’s a little risky modifying the bootstrap structure, but if you are OK with it, go for it. Remember, these overrides is going to affect all elements that uses those classes (globally).

Ok, you had me with risky, what does that mean? Why is risky, what can happen?

This theme uses a framework called Bootstrap. This means there are predefined structures set for creating the layout of the theme. Example:

<div class="container">
   <div class="row">
      <div class="col-lg-12">
          your content goes in this
      </div>
   </div>
</div>

The bootstrap framework also allows for columns. The col-lg-12 means one column (full width). You can read more about this here:

https://getbootstrap.com/css/#grid

IT’s a lot of reading, but normally it’s best to leave the bootstrap CSS alone. However, if you need a certain look and layout that requires modifying the Bootstrap code, then you can do it.

The classes you modified are global, which means they are used in other parts of the theme and the site. Basically making the .container as 100% means that all containers with that class will now be 100% (fluid).

Bootstrap does have a class for making the structure fluid, but it would mean copying over several theme files into your child theme and changing all instances (or the ones you want), from .container to .container-fluid

<div class="container-fluid">

When I say risky, I mean that what you change is going to affect other areas that uses those classes and containers. Means every page in this site will be full width (fluid) to the browser window. The column that uses the class=”col-lg-12″ will now have a padding of 0 pixels in space removed from all areas of the site that uses that class.

I hate to leave here, but it’s going on 3am for me and half asleep.

Long story short, if you are OK with how the site looks and functions with the custom CSS changes made, then that is fine. It just means everything will be 100% in width and any part of any page that has a div container using the class “col-lg-12” won’t have a 25px padding (space) on the left and right).

Ok, I think I understand now, and I’ll read more about it to get a full understanding about it
Until then I’ll leave the site as it is ?? I really don’t want to ruin it.
Thank you so much for your time and all your help, you are great!
Have a wonderful night