-
Posts
-
Hi,
In the private content section I added the link of a screenshot. There is ( may be not exact because of the shadow ) about 72 px wide space near by the boxed layout towards the edge of the browser edge.
My width of the page is 1315 px. While viewing a page, when a user starts to decrease the page width by pressing with the mouse and holding the bottom corner of any browser, Enfold is starting to get smaller in width for tablet size. However, until the mobile size ( smallest one ) , this space stays constant for PC and tablet users.
How can I change this space? It is really unnecessarily wide. I need it to be at least half the size or completely removed.
Awaiting Your Reply
Best RegardsHey ilkbaharkunduzu!
Thank you for using Enfold.
If you want to decrease the side spaces, add this in the Quick CSS field:
.responsive .boxed#top, .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency #header { width: 1315px; max-width: 98%; }Set the max-width to 100% if you want to remove the space completely.
Cheers!
IsmaelIsmael,
Thanks for the response. I added the code but the space is still there. Nothing happened. Tried via safari then via chrome. Refreshed the page but it has the same width.
When you decrease the width of the page you see that it is constant. It does not shrink until the tablet size. For the tablet size there is not any space like that.
Best Regards
Hey!
Try this instead:
.responsive .boxed#top, .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency #header { width: 98% !important; max-width: 98% !important; }If you have a cache plugin, purge the cache then hard refresh the page.
Regards,
IsmaelHi,
Thank you for your hard word Ismael. Something is happening but it is wrong. The space is diminishing but the line of the boxed layout is moving towards to ege of the window. The boxed layout size should be constant but It is not in this case. Just the content is constant except for the full width images which stretch and become as wide as the browser width minus a little 4-5 px white space ( because of % 98 I guess ) and grid row is problematic. If the browser is as wide as 23 inch display width, the boxed layout then will become as wide as the browser width I mean. The line of the box sticks to the browser edge. It is not what we want.
My Enfold width is 1315. If the browser width is wider, then the line of the boxed layout moves towards the walls of the browser which in turn causes a wide space within the boxed layout ( between the line and content ) except for the full width images. It is messing with the content area. This area should be untouchable.
The logic here is simple. The boxed layout should be constant. However when you start the decrease the page width size ,until it is as small as the tablet size, the space is there and it is unnecessary occupying valuable area. Some laotops users may want to make browser size like 1000 px wide if their display is small and they do not have the second display. I know there are lots of people like that. For the size between the tablet and 1315 px width that space should be controlled.
Overall, before it was a neighbourhood issue, this unnecessary space becomes the problem within Enfold layout itself. This code does not eliminate the space it invites the space inside of the layout. I do not know if I could describe the problem properly. Trying…
Best Regards
Hey!
quite difficult to imagine what you mean and to be honest your screenshot does not make things clearer for us. Could you show us exactly what you are trying to achieve please? Though it sounds as if you wish to control different behaviors on different screen sizes and for this check out this link about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Cheers!
Andy
- You must be logged in to reply to this topic.