I am using a full-width template from the Sela theme (https://wordpress.org/themes/sela/). I would like to increase the width of the full-width template on one specific page to the same length as the navigation bar.
http://www.somarunners.com/routes/
That is the page I would like to modify.
Using information on the web, I added the following to my css:
.page-template-full-width-page .content-wrapper.full-width.without-featured-image {
margin: 0;
}
But that did not have the intended effect.
If anyone has suggestions as to how to modify to width of the template, I would appreciate it.
you have media queries affecting your page template
#media screen and (min-width: 1180px)
.site {
margin: 0 auto;
max-width: 1180px;
padding: 0;
}
A simple change in max-width will allow the changes you want made
#media screen and (min-width: 1180px)
.site {
max-width: 100%;
}
I would suggest
A) creating a custom page template and setting .site to 100% from there if it is just the one page you need changing.
Also bear in mind that changing the max-width to 100% inside the media queries may not work on larger screens.
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
This is the link to the blog https://www.glamiva.com/2021/09/its-been-while.html
Issue:
I want the page size to occupied 100% of the screen instead of it is currently now. Can you show the code section that I need to edit?
I include the below image to make it easier to understand:
There is :
#media (min-width: 1200px){
.container {
width: 1170px;
}
}
Set the same but with width: auto; or 100% to overwrite the basic rule
What technology do you used ?
You could change the container size of your web to 100%.
reference
For example :
.container{
width: 100%;
}
So first I am doing freecodecamp and this is my Pen I am working on https://codepen.io/chrisalta94/pen/JwdBEq
As you can see the image and the space around it is too big, how can I reduce the size so it will look better, and if anyone knows how can I make it responsive?
CSS
#header-img {
display: flex;
height: 100%;
background:black;
}
img {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
You need to add a height attribute to your tag.
For example:
<img src="https://i.pinimg.com/originals/73/fb/7f/73fb7fb7b9cd1833e16bb4fcef17a962.png"
alt="Adidas Logo" height="200">
This way you can choose a particular height that works for you.
As for making it responsive, this is usually done by setting several media queries at different widths, that change the design when it breaks down. So this usually includes a lot of experimenting with when the design starts to break down.
Alternatively, what I often find just as effective and much simpler, is using the orientation: portrait media query, like so:
#media (orientation: portrait) {
/* CSS that needs to change here */
}
This will change the specific CSS on every viewport in portrait orientation. This includes phones and tablets for example, but also desktop browsers windows that are resized to a portrait orientation!
My current website layout: Screenshot 1
I used a div with a wrap id to center the site:
#wrap {
width: 70%;
margin: 0 auto;
}
but now it obviously also makes it 70% width on mobile which looks bad: SC2
I did try using media queries, the one with max-device-width specified by itself and also the ones that are on the bootstrap website under the CSS section, everytime I used any of those I removed the original #wrap css code, but nothing at all worked, my website would just go to being 100% on all devices and even if I made it 70% on mobile (just as a test) it was still the same everywhere, like there was no css code for the wrap id at all.
Sorry if it's a dumb question, i'm just lost and really want to make my site 100% at a certain (tablet-mobile) breakpoint.
Try this:-
#media (min-width: 768px) {
.mymenu {
width: 20%;
}
}
I'm attempting to make the twitter embed widget responsive, to do this I need to make the height a percentage. As it stands I am using the default twitter embed from here
That says I can set the height in advanced customization, however that is only for pixels.
Here is my code;
HTML:
<div id="body-twitterFeed">
<a class="twitter-timeline" href="https://twitter.com/ARavinMadMonkey" data-widget-id="347000705833398272" height="700" data-chrome="noscrollbar transparent" border-color="#DBDBDB">Tweets by #ARavinMadMonkey</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
CSS:
#body-twitterFeed{
height: 80%;
padding: 5px 10px 5px 10px;
overflow: hide;
}
I attempted to use overflow:hide; to hide anything outside of the body-twitterFeed div, but it just simply doesn't work.
If anyone could help me work out a way to make the height of the twitter feed responsive, it would help a lot!
Thanks in advance.
PS. I am not using bootstrap or anything.
You need to set the height of the class .twitterTimeline.
Theoretically this should be easy: just set it as a proportion of the window height (e.g., 40vh). Trouble is that mobile Safari has trouble rendering vh properly.
Instead, I think you need to use media queries to set the height, as in the following example:
#media screen and (max-height: 30rem) {
.twitter-timeline {
height: 15rem;
}
}
#media screen and (min-height: 30rem) {
.twitter-timeline {
height: 30rem;
}
}
If you want to see more about media queries and what all they can do, try reading this.